41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import { Autoplay } from 'swiper/modules';
|
|
import type { AnnouncementBarSectionPayload } from '../types';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getLocalizedField } from '../utils/localization';
|
|
|
|
// Import Swiper styles
|
|
import 'swiper/css';
|
|
|
|
interface DynamicAnnouncementBarProps {
|
|
payload: AnnouncementBarSectionPayload;
|
|
}
|
|
|
|
export default function DynamicAnnouncementBar({ payload }: DynamicAnnouncementBarProps) {
|
|
const { i18n } = useTranslation();
|
|
const lang = i18n.language;
|
|
const { speed = 3000 } = payload;
|
|
const slides = (payload.slides || []).map((slide) => getLocalizedField(slide, lang));
|
|
|
|
if (slides.length === 0) return null;
|
|
|
|
return (
|
|
<div
|
|
className="announcement-bar relative z-30 w-full overflow-hidden px-4 py-2.5 text-center text-[10px] font-semibold uppercase tracking-[0.2em] sm:text-xs bg-pop-black text-pop-bg"
|
|
>
|
|
<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>
|
|
);
|
|
}
|