x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -7,6 +7,9 @@ import { getCategoryImage } from '@homaroma/types'
 import ProductCard from '../ProductCard'
 import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
 import { useLang } from '../../hooks/useLang'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay } from 'swiper/modules'
+import 'swiper/css'
 
 type DynamicPageRendererProps = {
   sections: PageSection[]
@@ -68,16 +71,31 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const slides = Array.isArray(payload.slides) ? payload.slides : []
+  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
+  const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
+  const speed = typeof payload.speed === 'number' ? payload.speed : 3000
+
   if (!slides.length) return null
 
   return (
-    <section className="bg-pop-black px-4 py-3 text-center text-sm font-semibold tracking-wide text-white">
-      {slides.map((slide, index) => (
-        <span key={index} className={index === 0 ? '' : 'hidden md:inline'}>
-          {index > 0 && <span className="mx-4 text-white/30">/</span>}
-          {localizedFromRecord({ slide }, 'slide', resolvedLang)}
-        </span>
-      ))}
+    <section 
+      className={`announcement-bar absolute top-0 left-0 w-full z-[60] px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-pop-black'} ${textColor ? '' : 'text-white'} overflow-hidden`}
+      style={{ backgroundColor, color: textColor }}
+    >
+      <Swiper
+        modules={[Autoplay]}
+        autoplay={{ delay: speed, disableOnInteraction: false }}
+        loop={slides.length > 1}
+        className="w-full select-none"
+      >
+        {slides.map((slide, index) => (
+          <SwiperSlide key={index} className="flex items-center justify-center">
+            <span className="inline-block truncate max-w-full">
+              {localizedFromRecord({ slide }, 'slide', resolvedLang)}
+            </span>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </section>
   )
 }