76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import { Autoplay, Pagination } from 'swiper/modules';
|
|
import ProductCard from './ProductCard';
|
|
import type { Product, ProductsSectionPayload } from '@homaroma/types';
|
|
|
|
// Import Swiper styles
|
|
import 'swiper/css';
|
|
import 'swiper/css/pagination';
|
|
|
|
interface DynamicProductsProps {
|
|
payload: ProductsSectionPayload & { products?: Product[] };
|
|
}
|
|
|
|
export default function DynamicProducts({ payload }: DynamicProductsProps) {
|
|
const { title, subtitle, products = [], layout = 'grid', enableQuickShop = false } = payload;
|
|
|
|
return (
|
|
<section className="bg-pop-bg py-24 px-6 relative">
|
|
<div className="max-w-7xl mx-auto space-y-12 relative z-10">
|
|
<div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b border-gray-200 pb-6">
|
|
<div>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-pop-black">
|
|
{title || "Featured Picks"}
|
|
</h2>
|
|
{subtitle && (
|
|
<p className="text-gray-500 mt-2">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
<Link
|
|
to="/shop"
|
|
className="text-pop-pink font-medium hover:text-pop-red transition-colors flex items-center gap-2"
|
|
>
|
|
View All Collection →
|
|
</Link>
|
|
</div>
|
|
|
|
{products.length === 0 ? (
|
|
<div className="text-center py-12 text-gray-500">
|
|
No products found in this section
|
|
</div>
|
|
) : layout === 'carousel' ? (
|
|
<div className="relative select-none pb-12">
|
|
<Swiper
|
|
modules={[Autoplay, Pagination]}
|
|
spaceBetween={24}
|
|
slidesPerView={1}
|
|
breakpoints={{
|
|
640: { slidesPerView: 2 },
|
|
1024: { slidesPerView: 3 }
|
|
}}
|
|
pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-spa-forest' }}
|
|
autoplay={{ delay: 6000, disableOnInteraction: false }}
|
|
className="w-full"
|
|
>
|
|
{products.map((p) => (
|
|
<SwiperSlide key={p.id} className="h-auto">
|
|
<ProductCard product={p} enableQuickShop={enableQuickShop} />
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{products.map((p) => (
|
|
<div key={p.id}>
|
|
<ProductCard product={p} enableQuickShop={enableQuickShop} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|