product filter part

components/pageParts/products.tsx

@@ -1,15 +1,51 @@
-'use client'
+"use client";
 
-import React from 'react'
-import Title from '../tools/title'
-import { useTranslation } from 'react-i18next';
+import React, { useState } from "react";
+import Title from "../tools/title";
+import Text from "../text";
 
+const productsTypes: string[] = [
+  "trucks",
+  "cranes",
+  "forklift-trucks",
+  "excavators",
+  "road-repairs",
+];
 
 export default function Products() {
-    const {t} = useTranslation("common");
+
+  //product type togle states
+  const [productFilter,setProductFilter] = useState<string|null>(null);
   return (
     <div>
-        <Title text={t('pricing-h2')} />
+      {/* title part */}
+      <div className="flex flex-col md:gap-8 gap-4">
+        <div className="flex items-center justify-center w-full ">
+          <div className="text-secondary px-2  py-1 text-[18px] font-semibold ">
+            <Text txt="equipment" />
+          </div>
+          <div className="bg-primary text-secondary px-3 py-1 text-[18px] font-semibold ">
+            <Text txt="amazing" />
+          </div>
+        </div>
+        <Title text="pricing-h2" />
+      </div>
+
+      {/* product filters */}
+      <div className="flex flex-wrap gap-3 items-center justify-center">
+        {productsTypes.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 `}
+          >
+            <Text txt={item} />
+          </button>
+        ))}
+      </div>
+
+      {/* products */}
+      <div></div>
     </div>
-  )
+  );
 }