catalog part is done

components/pages/products/products.tsx

@@ -1,31 +1,45 @@
+import { ca, lede, slt } from "@/lib/demoData";
 import Filter from "./filter";
 import FilterInfo from "./filterInfo";
 import ProductCard from "./productCard";
 
-export function Products() {
+// slt , ca , lede
+
+export function Products({ categoryName }: { categoryName: string | null }) {
+  console.log("category name: ",categoryName)
+  const getProducts = () => {
+    switch (categoryName) {
+      case "slt":
+        return slt;
+      case "ca":
+        return ca;
+      case "lede":
+        return lede;
+      default:
+        return [...slt, ...ca, ...lede];
+    }
+  };
+
+  const products = getProducts();
   return (
     <div className="bg-[#1e1d1c] py-20">
       <div className="max-w-300 mx-auto w-full z-20 relative">
         <div className="flex items-start gap-5">
           {/* filter part */}
-          <Filter/>
+          <Filter />
 
           {/* main products */}
           <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-            {Array(9)
-              .fill(null)
-              .map((_, index) => (
-                <ProductCard
-                  key={index}
-                  title="Elektr yong'in detektori-Ypres ver.2"
-                  name="P-0834404"
-                  image="/images/products/products.webp"
-                  slug="P_0834404"
-                  status="full"
-                />
-              ))}
+            {products.map((item, index) => (
+              <ProductCard
+                key={index}
+                title={item.name}
+                image={item.image}
+                slug={item.slug}
+              />
+            ))}
           </div>
-          <FilterInfo/>
+          <FilterInfo />
         </div>
       </div>
     </div>