prapered for build product data

components/pageParts/products.tsx

@@ -3,19 +3,21 @@
 import React, { useState } from "react";
 import Title from "../tools/title";
 import Text from "../text";
+import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
+import Image from "next/image";
+import type {productFilterTypes}  from "@/types";
 
-const productsTypes: string[] = [
-  "trucks",
-  "cranes",
-  "forklift-trucks",
-  "excavators",
-  "road-repairs",
+const productFilterTypes: productFilterTypes[] = [
+  { name: "trucks", image: Truck },
+  { name: "cranes", image: Kran },
+  { name: "forklift-trucks", image: Ekskavator },
+  { name: "excavators", image: Forklift },
+  { name: "road-repairs", image: Asphalt },
 ];
 
 export default function Products() {
-
   //product type togle states
-  const [productFilter,setProductFilter] = useState<string|null>(null);
+  const [productFilter, setProductFilter] = useState<string | null>(null);
   return (
     <div>
       {/* title part */}
@@ -33,13 +35,21 @@ export default function Products() {
 
       {/* product filters */}
       <div className="flex flex-wrap gap-3 items-center justify-center">
-        {productsTypes.map((item, index) => (
+        {productFilterTypes.map((item, index) => (
           <button
             key={index}
-            onClick={()=>setProductFilter(item)}
-            className={`${productFilter === item ?'bg-secondary' : ''} hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-10 py-3 text-2xl rounded-tr-full rounded-bl-full `}
+            onClick={() => setProductFilter(item.name)}
+            className={`${
+              productFilter === item.name ? "bg-secondary" : ""
+            } flex items-center gap-2 hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-8 py-3 text-2xl rounded-tr-full rounded-bl-full `}
           >
-            <Text txt={item} />
+            <Text txt={item.name} />
+            <Image
+              src={item.image}
+              alt="Truck images"
+              width={50}
+              height={50}
+            />
           </button>
         ))}
       </div>