x

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -19,18 +19,57 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
   const title = getLocalizedField(p.title, lang);
   const description = getLocalizedField(p.description, lang);
   const cardStyle = p.cardStyle || 'standard';
-  const isMinimal = cardStyle === 'minimal_swatch';
+  const isMinimal = cardStyle === 'minimal' || cardStyle === 'swatch' || cardStyle === 'minimal_swatch';
   const viewAllLink = p.viewAllLink || '/products';
   const viewAllText = getLocalizedField(p.viewAllText, lang) || 'View All';
   const badgeText = getLocalizedField(p.badgeText, lang);
+  const layout = p.layout || 'carousel';
+  const containerWidth = p.containerWidth || 'standard';
+  const cardSize = p.cardSize || 'medium';
+
+  const getContainerWidthClass = (width: string) => {
+    switch (width) {
+      case 'full':
+        return 'w-full max-w-none';
+      case 'wide':
+        return 'w-full max-w-[1600px] mx-auto';
+      case 'standard':
+      default:
+        return 'ui-section-inner';
+    }
+  };
+
+  const getCarouselCardWidth = () => {
+    switch (cardSize) {
+      case 'compact':
+        return 'w-[46vw] sm:w-[calc((100%-32px)/3)] md:w-[calc((100%-60px)/4)] lg:w-[calc((100%-100px)/6)] flex-none snap-start';
+      case 'large':
+        return 'w-[78vw] sm:w-[calc((100%-16px)/2)] md:w-[calc((100%-20px)/2)] lg:w-[calc((100%-40px)/3)] flex-none snap-start';
+      case 'medium':
+      default:
+        return 'w-[68vw] sm:w-[calc((100%-16px)/2)] md:w-[calc((100%-40px)/3)] lg:w-[calc((100%-60px)/4)] flex-none snap-start';
+    }
+  };
+
+  const getGridColsClass = () => {
+    switch (cardSize) {
+      case 'compact':
+        return 'grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6';
+      case 'large':
+        return 'grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3';
+      case 'medium':
+      default:
+        return 'grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
+    }
+  };
 
   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 space-y-6">
+    <section className={`bg-pop-bg px-4 sm:px-6 md:px-8 overflow-hidden ${getSectionPaddingClasses(p)}`}>
+      <div className={`${getContainerWidthClass(containerWidth)} space-y-6`}>
         {isMinimal ? (
           <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between border-b border-black/10 pb-5">
             <div className="flex flex-col md:flex-row md:items-baseline md:gap-4">
@@ -55,6 +94,18 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
           <div className="text-center py-12 text-pop-black/50 italic">
             No products to display.
           </div>
+        ) : layout === 'grid' ? (
+          <div className={getGridColsClass()}>
+            {products.map((prod: any) => (
+              <ProductCard 
+                key={prod.id}
+                product={prod} 
+                cardStyle={cardStyle} 
+                badgeText={badgeText} 
+                enableQuickShop={cardStyle === 'standard'} 
+              />
+            ))}
+          </div>
         ) : (
           <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
             <button
@@ -68,17 +119,14 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
               {products.map((prod: any) => (
                 <div
                   key={prod.id}
-                  className={
-                    isMinimal
-                      ? "w-[42vw] sm:w-[200px] md:w-[220px] lg:w-[240px] flex-none snap-start"
-                      : "w-[85vw] sm:w-[300px] flex-none snap-start"
-                  }
+                  className={getCarouselCardWidth()}
                 >
-                  {isMinimal ? (
-                    <ProductSwatchCard product={prod} badgeText={badgeText} />
-                  ) : (
-                    <ProductCard product={prod} enableQuickShop={true} />
-                  )}
+                  <ProductCard 
+                    product={prod} 
+                    cardStyle={cardStyle} 
+                    badgeText={badgeText} 
+                    enableQuickShop={cardStyle === 'standard'} 
+                  />
                 </div>
               ))}
             </div>