57 lines
2.0 KiB
React
57 lines
2.0 KiB
React
|
"use client"
|
||
|
|
import { useCallback } from "react"
|
||
|
|
import useEmblaCarousel from "embla-carousel-react"
|
||
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
||
|
|
import CardNormal from "../Cards/CardNormal/page"
|
||
|
|
|
||
|
|
export function ProductCarouselSection({products}) {
|
||
|
|
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false, align: "start" })
|
||
|
|
|
||
|
|
const scrollPrev = useCallback(() => {
|
||
|
|
if (emblaApi) emblaApi.scrollPrev()
|
||
|
|
}, [emblaApi])
|
||
|
|
|
||
|
|
const scrollNext = useCallback(() => {
|
||
|
|
if (emblaApi) emblaApi.scrollNext()
|
||
|
|
}, [emblaApi])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="py-12 px-4 md:px-6 lg:px-8">
|
||
|
|
<div className="max-w-7xl mx-auto">
|
||
|
|
<h2 className="text-3xl font-bold text-center mb-2">Our Featured Products</h2>
|
||
|
|
<p className="text-xl text-center text-gray-600 mb-8">Discover our handpicked selection of top-quality items</p>
|
||
|
|
|
||
|
|
<div className="relative">
|
||
|
|
<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"
|
||
|
|
>
|
||
|
|
<CardNormal {...product} />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
variant="outline"
|
||
|
|
size="icon"
|
||
|
|
className="absolute top-1/2 left-4 transform -translate-y-1/2"
|
||
|
|
onClick={scrollPrev}
|
||
|
|
>
|
||
|
|
<ChevronLeft className="h-4 w-4" />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
variant="outline"
|
||
|
|
size="icon"
|
||
|
|
className="absolute top-1/2 right-4 transform -translate-y-1/2"
|
||
|
|
onClick={scrollNext}
|
||
|
|
>
|
||
|
|
<ChevronRight className="h-4 w-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|