60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { Swiper as SwiperType } from "swiper";
|
|
import { FreeMode } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/free-mode";
|
|
import ProductCard from "./ui/ProductCard";
|
|
import SectionHeader from "./ui/SectionHeader";
|
|
import CarouselNav from "./ui/CarouselNav";
|
|
import type { ProductCardData } from "@/lib/types";
|
|
|
|
export default function ProductCarousel({
|
|
title,
|
|
desc,
|
|
href,
|
|
products,
|
|
}: {
|
|
title: string;
|
|
desc?: string;
|
|
href: string;
|
|
products: ProductCardData[];
|
|
}) {
|
|
const [swiper, setSwiper] = useState<SwiperType | null>(null);
|
|
if (products.length === 0) return null;
|
|
|
|
return (
|
|
<section className="boxed mt-10">
|
|
<SectionHeader title={title} desc={desc} href={href} nav={<CarouselNav swiper={swiper} />} />
|
|
|
|
<div className="relative">
|
|
<Swiper
|
|
modules={[FreeMode]}
|
|
dir="rtl"
|
|
freeMode
|
|
onSwiper={setSwiper}
|
|
slidesPerView={2.2}
|
|
spaceBetween={12}
|
|
breakpoints={{
|
|
480: { slidesPerView: 3.2 },
|
|
768: { slidesPerView: 4.2 },
|
|
1024: { slidesPerView: 6 },
|
|
}}
|
|
>
|
|
{products.map((product) => (
|
|
<SwiperSlide key={product.id} className="h-auto">
|
|
<ProductCard product={product} />
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
|
|
<div className="mt-4 flex justify-center lg:hidden">
|
|
<CarouselNav swiper={swiper} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|