From b3cf0c2a49476e8bf9e8c25b2c87da2554ddbc00 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Thu, 11 Dec 2025 19:14:35 +0500
Subject: [PATCH] all products page

---
 components/productsPage/products.tsx | 37 +++++++++++++++++++++++++---
 lib/allProducts.ts                   | 23 ++++++++---------
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/components/productsPage/products.tsx b/components/productsPage/products.tsx
index 87b7f71..d0b6f6f 100644
--- a/components/productsPage/products.tsx
+++ b/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>
   );
 }
diff --git a/lib/allProducts.ts b/lib/allProducts.ts
index 97b8a75..51864da 100644
--- a/lib/allProducts.ts
+++ b/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 });
+  }
+}