all products page

components/productsPage/products.tsx

@@ -1,24 +1,55 @@
 "use client";
-import { allProduct } from "@/lib/allProducts";
 import { useEffect, useState } from "react";
 import EmptyState from "./emptyData";
+import { GET } from "@/lib/allProducts";
+import { ProductModal } from "../ProductModal";
+import { motion } from "framer-motion";
+import { ProductCard } from "../ProductCard";
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
 
 export default function Products() {
   const [allProducts, setAllProducts] = useState<any>(null);
+  const [selectedProduct, setSelectedProduct] = useState<any>(null);
   useEffect(() => {
-    const all = allProduct();
+    const all = GET();
     all && Array.isArray(all) && all.length > 0
       ? setAllProducts(all)
       : setAllProducts([]);
     setAllProducts;
   }, []);
+  const handleViewDetails = (slug: string) => {
+    const product = allProducts.find((p: any) => p.slug === slug);
+    if (product) {
+      setSelectedProduct(product);
+    }
+  };
   return (
     <div className="">
       {allProducts && allProducts.length > 0 ? (
-        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"></div>
+        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
+          {allProducts.map((product: any) => (
+            <motion.div key={product.id} variants={itemVariants}>
+              <ProductCard
+                product={product}
+                onViewDetails={handleViewDetails}
+              />
+            </motion.div>
+          ))}
+        </div>
       ) : (
         <EmptyState />
       )}
+      {/* Product Modal */}
+      {selectedProduct && (
+        <ProductModal
+          product={selectedProduct}
+          onClose={() => setSelectedProduct(null)}
+        />
+      )}
     </div>
   );
 }