x

2026-06-07 17:17:01 +07:00
1 parent d325cd8763
commit c6bf2f70ac
@@ -0,0 +1,75 @@
+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 &rarr;
+          </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>
+  );
+}