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>
   );
 }

lib/allProducts.ts

@@ -1,13 +1,14 @@
 import axios from "axios";
 
-export const allProduct = async () => {
-    try{
-        const res = await axios.get('https://api.serenmebel.uz/api/products/');
-        console.log("all products res: ",res);
-        
-        return res
-    }catch(err){
-        console.log("all product error: ",err);
-        return []
-    }
-};
+export async function GET() {
+  try {
+    const res = await axios.get("https://api.serenmebel.uz/api/products/");
+    console.log("all products res: ", res?.data);
+
+    return Response.json(res.data);
+  } catch (error: any) {
+    console.log("all products error: ", error);
+
+    return Response.json({ error: error.message });
+  }
+}