x

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -1,9 +1,6 @@
-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';
+import { useRef } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
 
@@ -19,6 +16,10 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
   const title = getLocalizedField(p.title, lang);
   const description = getLocalizedField(p.description, lang);
 
+  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="ui-section-band bg-pop-bg">
       <div className="ui-section-inner">
@@ -34,27 +35,28 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
             No products to display.
           </div>
         ) : (
-          <div className="relative pb-12" style={{ '--swiper-navigation-color': 'var(--color-pop-black)' } as React.CSSProperties}>
-            <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-pop-black' }}
-              navigation
-              autoplay={{ delay: 5000, disableOnInteraction: false }}
-              className="w-full !px-4"
+          <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"
+              aria-label="Scroll left"
             >
+              <ChevronLeft className="h-6 w-6" />
+            </button>
+            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-12">
               {products.map((p: any) => (
-                <SwiperSlide key={p.id} className="h-auto">
+                <div key={p.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                   <ProductCard product={p} enableQuickShop={true} />
-                </SwiperSlide>
+                </div>
               ))}
-            </Swiper>
+            </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"
+              aria-label="Scroll right"
+            >
+              <ChevronRight className="h-6 w-6" />
+            </button>
           </div>
         )}
       </div>