52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
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() {
|
|
|
|
//product type togle states
|
|
const [productFilter,setProductFilter] = useState<string|null>(null);
|
|
return (
|
|
<div>
|
|
{/* 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>
|
|
);
|
|
}
|