x

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -1,7 +1,9 @@
 import ProductCard from './ProductCard';
+import ProductSwatchCard from './ProductSwatchCard';
 import { useRef } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { getLocalizedField } from '../utils/localization';
 import { getSectionPaddingClasses } from '../utils/spacing';
 
@@ -16,6 +18,11 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
   const { products = [] } = p;
   const title = getLocalizedField(p.title, lang);
   const description = getLocalizedField(p.description, lang);
+  const cardStyle = p.cardStyle || 'standard';
+  const isMinimal = cardStyle === 'minimal_swatch';
+  const viewAllLink = p.viewAllLink || '/products';
+  const viewAllText = getLocalizedField(p.viewAllText, lang) || 'View All';
+  const badgeText = getLocalizedField(p.badgeText, lang);
 
   const carouselRef = useRef<HTMLDivElement>(null);
   const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' });
@@ -23,12 +30,25 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
 
   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 className="ui-section-inner 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">
+              {title && <h2 className="text-2xl md:text-4xl font-serif text-pop-black tracking-tight">{title}</h2>}
+              {description && <p className="text-xs md:text-sm text-pop-black/60 font-normal mt-1 md:mt-0">{description}</p>}
+            </div>
+            <Link to={viewAllLink} className="inline-flex items-center gap-1.5 text-xs font-semibold text-pop-black hover:text-brand-primary transition-colors hover:underline self-start md:self-auto">
+              <span>{viewAllText}</span>
+              <ArrowRight className="w-3.5 h-3.5" />
+            </Link>
           </div>
+        ) : (
+          (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 ? (
@@ -39,24 +59,35 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
           <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"
+              className="hidden md:flex bg-white rounded-full shadow-md hover:text-brand-primary h-9 w-9 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-4 border border-black/10"
               aria-label="Scroll left"
             >
-              <ChevronLeft className="h-6 w-6" />
+              <ChevronLeft className="h-5 w-5" />
             </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 ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 md:gap-5 pb-6">
+              {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"
+                  }
+                >
+                  {isMinimal ? (
+                    <ProductSwatchCard product={prod} badgeText={badgeText} />
+                  ) : (
+                    <ProductCard product={prod} 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"
+              className="hidden md:flex bg-white rounded-full shadow-md hover:text-brand-primary h-9 w-9 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-4 border border-black/10"
               aria-label="Scroll right"
             >
-              <ChevronRight className="h-6 w-6" />
+              <ChevronRight className="h-5 w-5" />
             </button>
           </div>
         )}