hamid zarghami
28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import { Carousel, CarouselControls, CarouselSlide, CarouselTrack } from "@/app/components/Carousel";
|
||
import ProductCard from "@/app/home/components/ProductCard";
|
||
import { type FC } from "react";
|
||
import { RELATED_PRODUCTS } from "../constants";
|
||
|
||
const ProductRelated: FC = () => {
|
||
return (
|
||
<section className="mt-8 px-4 sm:mt-10 sm:px-8 lg:mt-12 lg:px-30">
|
||
<Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 12, md: 16, lg: 24 }}>
|
||
<div className="flex items-center justify-between gap-4">
|
||
<h2 className="text-lg font-bold text-[#0A1B2C] sm:text-xl">محصولات مرتبط</h2>
|
||
<CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
|
||
</div>
|
||
|
||
<CarouselTrack className="mt-6 px-2 py-4 -mx-2 sm:mt-8">
|
||
{RELATED_PRODUCTS.map((title) => (
|
||
<CarouselSlide key={title}>
|
||
<ProductCard title={title} />
|
||
</CarouselSlide>
|
||
))}
|
||
</CarouselTrack>
|
||
</Carousel>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default ProductRelated;
|