x

2026-06-08 07:15:52 +07:00
1 parent c1c3a43d7d
commit a5f6e3171b
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
+import ProductCard from './ProductCard';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+
+interface DynamicProductCarouselProps {
+  payload: any;
+}
+
+export default function DynamicProductCarousel({ payload }: DynamicProductCarouselProps) {
+  const { title, description, products = [] } = payload || {};
+
+  return (
+    <section className="py-20 bg-spa-sage/30 px-6">
+      <div className="max-w-7xl mx-auto">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && <h2 className="text-3xl md:text-5xl font-serif text-spa-forest mb-4">{title}</h2>}
+            {description && <p className="text-lg text-spa-stone/70 max-w-2xl mx-auto">{description}</p>}
+          </div>
+        )}
+        
+        {products.length === 0 ? (
+          <div className="text-center py-12 text-spa-stone/50 italic">
+            No products to display.
+          </div>
+        ) : (
+          <div className="relative pb-12">
+            <Swiper
+              modules={[Autoplay, Pagination, Navigation]}
+              spaceBetween={32}
+              slidesPerView={1}
+              breakpoints={{
+                640: { slidesPerView: 2 },
+                1024: { slidesPerView: 3 },
+                1280: { slidesPerView: 4 }
+              }}
+              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-spa-forest' }}
+              navigation
+              autoplay={{ delay: 5000, disableOnInteraction: false }}
+              className="w-full !px-4"
+            >
+              {products.map((p: any) => (
+                <SwiperSlide key={p.id} className="h-auto">
+                  <ProductCard product={p} enableQuickShop={true} />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}