@@ -15,7 +16,15 @@ const Layout = ({ title, children }: Layout) => {
{title}
- {children}
+
+ {isLoading ? (
+
+
loading...
+
+ ) : (
+ children
+ )}
+
);
diff --git a/apps/client/src/components/admin/product/index.tsx b/apps/client/src/components/admin/product/index.tsx
new file mode 100644
index 0000000..78b6f19
--- /dev/null
+++ b/apps/client/src/components/admin/product/index.tsx
@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import { motion, AnimatePresence, Variants } from 'framer-motion';
+import { ChevronDownIcon, TrashIcon, PencilSquareIcon } from '@heroicons/react/24/solid';
+
+import { Product } from 'shared-types';
+
+import { formatCurrency } from '@utils/index';
+import Photos from '@utils/Photos';
+import Stars from '@utils/Stars';
+
+const productVariants: Variants = {
+ hidden: {
+ opacity: 0,
+ translateY: '10px',
+ },
+ show: {
+ opacity: 1,
+ translateY: '0px',
+
+ transition: {
+ staggerChildren: 0.1,
+ },
+ },
+};
+
+const Index = ({
+ _id,
+ name,
+ price,
+ photos,
+ brand,
+ category,
+ ratings,
+ stock,
+ reviews,
+ numberOfReviews,
+ user,
+ description,
+ createdAt,
+ updatedAt,
+}: Product) => {
+ const [descriptionOpen, setDescriptionOpen] = useState(false);
+ const [reviewsOpen, setReviewsOpen] = useState(false);
+
+ return (
+