everything

components/pageParts/products.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Title from "../title";
 import Text from "../text";
 import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
 import Image from "next/image";
 import type { productFilterTypes, ProductTypes } from "@/types";
-import { allProducts } from "@/data";
+import { allProducts, cranes, excavators, forklift, road_repairs, trucks } from "@/data";
 import ProductCard from "../cards/productCard";
 
 const productFilterTypesMainPage: productFilterTypes[] = [
@@ -15,13 +15,33 @@ const productFilterTypesMainPage: productFilterTypes[] = [
   { name: "forklift-trucks", image: Ekskavator },
   { name: "excavators", image: Forklift },
   { name: "road-repairs", image: Asphalt },
+  { name: "all", image: '' },
 ];
 
 export default function Products() {
-  //product type togle states
+ 
   const [productFilter, setProductFilter] = useState<string | null>(null);
+
+  const [cars,setCars] = useState(allProducts)
+
+  // execute filetr function 
+  useEffect(()=>{
+    if(productFilter === 'trucks'){
+      setCars(trucks);
+    }else if(productFilter === 'cranes'){
+      setCars(cranes);
+    }else if(productFilter === 'forklift-trucks'){
+      setCars(forklift);
+    } else if(productFilter === 'excavators'){
+      setCars(excavators);
+    }else if(productFilter === 'road-repairs'){
+      setCars(road_repairs)
+    }else {
+      setCars(allProducts)
+    }
+  },[productFilter])
   return (
-    <div className="max-w-[1200px] w-full mx-auto">
+    <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
       {/* title part */}
       <div className="flex flex-col md:gap-8 gap-4">
         <div className="flex items-center justify-center w-full ">
@@ -36,7 +56,7 @@ export default function Products() {
       </div>
 
       {/* product filters */}
-      <div className="flex flex-wrap gap-1 items-center justify-center mb-10 ">
+      <div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
         {productFilterTypesMainPage.map((item, index) => (
           <button
             key={index}
@@ -46,20 +66,20 @@ export default function Products() {
             } flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
           >
             <Text txt={item.name} />
-            <Image
+            {item.image && (<Image
               src={item.image}
               alt="Truck images"
               width={50}
               height={50}
               className="object-cover"
-            />
-          </button>
+            />)}
+          </button> 
         ))}
       </div>
 
       {/* products */}
-      <div className="grid gap-5 grid-cols-1 min-sm:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
-        {allProducts.map((item: ProductTypes, index: number) => (
+      <div className="grid gap-5 grid-cols-1 place-content-center min-sm:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
+        {cars.map((item: ProductTypes, index: number) => (
           <div key={index} >
             <ProductCard data={item} />
           </div>