86 lines
3.2 KiB
JavaScript
86 lines
3.2 KiB
JavaScript
"use client"
|
|
|
|
import useEmblaCarousel from "embla-carousel-react"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { useCallback } from "react"
|
|
import CardNormal from "../Cards/CardNormal"
|
|
import Autoplay from "embla-carousel-autoplay"
|
|
import Link from "next/link"
|
|
import { useLocale, useTranslations } from "next-intl"
|
|
|
|
|
|
|
|
|
|
export default function ProductCarousel({ title, subtitle, products, showMoreLink }) {
|
|
const t = useTranslations("Utils")
|
|
const locale = useLocale()
|
|
const [emblaRef, emblaApi] = useEmblaCarousel(
|
|
{ loop: true, align: "start", direction: locale === "en" ? "ltr" : "rtl" },
|
|
[
|
|
Autoplay({ delay: 3000, stopOnInteraction: true }),
|
|
]
|
|
)
|
|
|
|
const scrollPrev = useCallback(() => {
|
|
if (emblaApi) emblaApi.scrollPrev()
|
|
}, [emblaApi])
|
|
|
|
const scrollNext = useCallback(() => {
|
|
if (emblaApi) emblaApi.scrollNext()
|
|
}, [emblaApi])
|
|
|
|
return (
|
|
<section className="py-12 max-w-screen-xl mx-auto h-fit" >
|
|
|
|
<div className="flex sm:justify-between flex-col sm:flex-row pb-4 items-center">
|
|
<div className="flex flex-col gap-2">
|
|
<h2 className="text-3xl font-bold text-center mb-2">{title}</h2>
|
|
{
|
|
subtitle &&
|
|
<p className="text-xl text-center text-gray-600 mb-8">{subtitle}</p>
|
|
}
|
|
</div>
|
|
{
|
|
showMoreLink &&
|
|
<Link href={showMoreLink} className="text-sm text-blue-600 underline">
|
|
{t("showMoreLink")}
|
|
</Link>
|
|
}
|
|
</div>
|
|
|
|
<div className="relative h-fit">
|
|
<div className="overflow-hidden" ref={emblaRef} >
|
|
<div className="flex">
|
|
{products.map((product) => (
|
|
<div
|
|
key={product.id}
|
|
className="flex-[0_0_100%] min-w-0 sm:flex-[0_0_50%] md:flex-[0_0_33.33%] lg:flex-[0_0_25%] pl-4 my-2"
|
|
>
|
|
<CardNormal product={product} priority={true} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<button
|
|
variant="outline"
|
|
size="icon"
|
|
className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-10 border border-white flex flex-col items-center justify-center"
|
|
onClick={scrollPrev}
|
|
>
|
|
<ChevronLeft className="size-10" />
|
|
</button>
|
|
<button
|
|
variant="outline"
|
|
size="icon"
|
|
className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-10 border border-white flex flex-col items-center justify-center"
|
|
onClick={scrollNext}
|
|
>
|
|
<ChevronRight className="size-10" />
|
|
</button>
|
|
</div>
|
|
|
|
</section>
|
|
)
|
|
}
|
|
|