carType page over

components/pageParts/products.tsx

@@ -1,12 +1,19 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import Title from "../title";
-import Text from "../text";
+import Title from "../lib_components/title";
+import Text from "../lib_components/text";
 import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
 import Image from "next/image";
 import type { productFilterTypes, ProductTypes } from "@/types";
-import { allProducts, cranes, excavators, forklift, road_repairs, trucks } from "@/data";
+import {
+  allProducts,
+  cranes,
+  excavators,
+  forklift,
+  road_repairs,
+  trucks,
+} from "@/data";
 import ProductCard from "../cards/productCard";
 
 const productFilterTypesMainPage: productFilterTypes[] = [
@@ -15,31 +22,30 @@ const productFilterTypesMainPage: productFilterTypes[] = [
   { name: "forklift-trucks", image: Ekskavator },
   { name: "excavators", image: Forklift },
   { name: "road-repairs", image: Asphalt },
-  { name: "all", image: '' },
+  { name: "all", image: "" },
 ];
 
 export default function Products() {
- 
   const [productFilter, setProductFilter] = useState<string | null>(null);
 
-  const [cars,setCars] = useState(allProducts)
+  const [cars, setCars] = useState(allProducts);
 
-  // execute filetr function 
-  useEffect(()=>{
-    if(productFilter === 'trucks'){
+  // execute filetr function
+  useEffect(() => {
+    if (productFilter === "trucks") {
       setCars(trucks);
-    }else if(productFilter === 'cranes'){
+    } else if (productFilter === "cranes") {
       setCars(cranes);
-    }else if(productFilter === 'forklift-trucks'){
+    } else if (productFilter === "forklift-trucks") {
       setCars(forklift);
-    } else if(productFilter === 'excavators'){
+    } else if (productFilter === "excavators") {
       setCars(excavators);
-    }else if(productFilter === 'road-repairs'){
-      setCars(road_repairs)
-    }else {
-      setCars(allProducts)
+    } else if (productFilter === "road-repairs") {
+      setCars(road_repairs);
+    } else {
+      setCars(allProducts);
     }
-  },[productFilter])
+  }, [productFilter]);
   return (
     <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
       {/* title part */}
@@ -66,21 +72,23 @@ 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} />
-            {item.image && (<Image
-              src={item.image}
-              alt="Truck images"
-              width={50}
-              height={50}
-              className="object-cover"
-            />)}
-          </button> 
+            {item.image && (
+              <Image
+                src={item.image}
+                alt="Truck images"
+                width={50}
+                height={50}
+                className="object-cover"
+              />
+            )}
+          </button>
         ))}
       </div>
 
       {/* products */}
       <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
         {cars.map((item: ProductTypes, index: number) => (
-          <div key={index} >
+          <div key={index}>
             <ProductCard data={item} />
           </div>
         ))}