37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
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="announcement-bar 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>
|
|
);
|
|
}
|