67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
import ProductCard from './ProductCard';
|
|
import { useRef } from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getLocalizedField } from '../utils/localization';
|
|
import { getSectionPaddingClasses } from '../utils/spacing';
|
|
|
|
interface DynamicProductCarouselProps {
|
|
payload: any;
|
|
}
|
|
|
|
export default function DynamicProductCarousel({ payload }: DynamicProductCarouselProps) {
|
|
const { i18n } = useTranslation();
|
|
const lang = i18n.language;
|
|
const p = payload || {};
|
|
const { products = [] } = p;
|
|
const title = getLocalizedField(p.title, lang);
|
|
const description = getLocalizedField(p.description, lang);
|
|
|
|
const carouselRef = useRef<HTMLDivElement>(null);
|
|
const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' });
|
|
const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' });
|
|
|
|
return (
|
|
<section className={`bg-pop-bg ${getSectionPaddingClasses(p)}`}>
|
|
<div className="ui-section-inner">
|
|
{(title || description) && (
|
|
<div className="text-center mb-12">
|
|
{title && <h2 className="text-3xl md:text-5xl font-serif text-pop-black mb-4">{title}</h2>}
|
|
{description && <p className="text-lg text-pop-black/70 max-w-2xl mx-auto">{description}</p>}
|
|
</div>
|
|
)}
|
|
|
|
{products.length === 0 ? (
|
|
<div className="text-center py-12 text-pop-black/50 italic">
|
|
No products to display.
|
|
</div>
|
|
) : (
|
|
<div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
|
|
<button
|
|
onClick={scrollLeft}
|
|
className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
|
|
aria-label="Scroll left"
|
|
>
|
|
<ChevronLeft className="h-6 w-6" />
|
|
</button>
|
|
<div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-12">
|
|
{products.map((p: any) => (
|
|
<div key={p.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
|
|
<ProductCard product={p} enableQuickShop={true} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={scrollRight}
|
|
className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
|
|
aria-label="Scroll right"
|
|
>
|
|
<ChevronRight className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|