added backend

components/productsPage/emptyData.tsx

@@ -55,12 +55,12 @@ export default function EmptyState() {
             </p>
 
             <div className="mt-6 flex flex-col sm:flex-row items-center sm:items-start gap-3 md:gap-4 justify-center md:justify-start">
-              <motion.a
+              <motion.div
                 className="inline-flex items-center justify-center px-5 py-2.5 bg-primary/70 hover:bg-primary text-white rounded-lg shadow-md transition-colors text-sm font-medium"
                 // @ts-ignore allow Link-like anchor
               >
                 <Link href="/">{t.empty_data.back || "Bosh sahifa"}</Link>
-              </motion.a>
+              </motion.div>
             </div>
           </motion.div>
         </div>

components/productsPage/products.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { useEffect, useState } from "react";
 import EmptyState from "./emptyData";
-import { GET } from "@/lib/allProducts";
 import { ProductModal } from "../productSection/ProductModal";
 import { motion } from "framer-motion";
 import { ProductCard } from "../productSection/ProductCard";
+import axios from "axios";
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -14,21 +14,26 @@ const itemVariants = {
 export default function Products() {
   const [allProducts, setAllProducts] = useState<any>(null);
   const [selectedProduct, setSelectedProduct] = useState<any>(null);
-  const all = GET();
+
   useEffect(() => {
-    all && Array.isArray(all) && all.length > 0
-      ? setAllProducts(all)
-      : setAllProducts([]);
-    setAllProducts;
-  }, [all]);
-  const handleViewDetails = (slug: string) => {
-    const product = allProducts.find((p: any) => p.slug === slug);
+    async function getData() {
+      await axios.get("https://api.serenmebel.uz/api/products/").then((res) => {
+        console.log("all data: ", res?.data);
+        const allData = res?.data || [];
+        setAllProducts(allData);
+      });
+    }
+    getData();
+  }, []);
+
+  const handleViewDetails = (id: number) => {
+    const product = allProducts.find((p: any) => p.id === id);
     if (product) {
       setSelectedProduct(product);
     }
   };
   return (
-    <div className="">
+    <div className="py-20 max-w-[1200px] w-full mx-auto px-2 ">
       {allProducts && allProducts.length > 0 ? (
         <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
           {allProducts.map((product: any) => (