x

apps/spa/src/components/DynamicAnnouncementBar.tsx

@@ -0,0 +1,36 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper/modules';
+import type { AnnouncementBarSectionPayload } from '../types';
+
+// Import Swiper styles
+import 'swiper/css';
+
+interface DynamicAnnouncementBarProps {
+  payload: AnnouncementBarSectionPayload;
+}
+
+export default function DynamicAnnouncementBar({ payload }: DynamicAnnouncementBarProps) {
+  const { slides = [], backgroundColor = '#1F3D2D', textColor = '#FDFDF9', speed = 3000 } = payload;
+
+  if (slides.length === 0) return null;
+
+  return (
+    <div 
+      className="w-full py-2.5 px-4 text-center text-[10px] sm:text-xs tracking-[0.2em] font-semibold uppercase relative z-30 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, idx) => (
+          <SwiperSlide key={idx} className="flex items-center justify-center">
+            <span className="inline-block truncate max-w-full">{slide}</span>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+}