96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
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 ProductCard from "../cards/productCard";
|
|
|
|
const productFilterTypesMainPage: productFilterTypes[] = [
|
|
{ name: "trucks", image: Truck },
|
|
{ name: "cranes", image: Kran },
|
|
{ name: "forklift-trucks", image: Ekskavator },
|
|
{ name: "excavators", image: Forklift },
|
|
{ name: "road-repairs", image: Asphalt },
|
|
{ name: "all", image: "" },
|
|
];
|
|
|
|
export default function Products() {
|
|
//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 dir="ltr" className="max-w-[1200px] w-full mx-auto">
|
|
{/* title part */}
|
|
<div className="flex flex-col mb-10">
|
|
<div className="flex items-center justify-center w-full ">
|
|
<div className="text-secondary px-2 text-[18px] font-semibold ">
|
|
<Text txt="katalog" />
|
|
</div>
|
|
</div>
|
|
<Title text="pricing-h2" />
|
|
</div>
|
|
|
|
{/* product filters */}
|
|
{/* <div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
|
|
{productFilterTypesMainPage.map((item, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setProductFilter(item.name)}
|
|
className={`${
|
|
productFilter === item.name ? "bg-secondary" : ""
|
|
} 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>
|
|
))}
|
|
</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}>
|
|
<ProductCard data={item} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|