46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { Megaphone } from "lucide-react";
|
|
|
|
const messages = [
|
|
"Peraturan Menteri Lingkungan Hidup dan Kehutanan No. 14 Tahun 2024 Tentang Penyelenggaraan Pengawasan dan Sanksi Administratif Lingkungan Hidup",
|
|
"Workshop Peningkatan Kapasitas Pengendalian Pencemaran Udara akan diselenggarakan pada bulan depan.",
|
|
"DLH DKI Jakarta mengajak masyarakat untuk berpartisipasi dalam program lingkungan ramah sampah.",
|
|
];
|
|
|
|
export default function RunningText() {
|
|
const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setIsVisible(false); // Hide current message
|
|
|
|
setTimeout(() => {
|
|
setCurrentMessageIndex(
|
|
(prevIndex) => (prevIndex + 1) % messages.length
|
|
);
|
|
setIsVisible(true); // Show new message
|
|
}, 500); // Wait for fade out animation
|
|
}, 3000); // Change message every 3 seconds
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="w-full bg-green-100 p-2 flex overflow-hidden">
|
|
<div className="flex container max-w-7xl px-8 relative">
|
|
<Megaphone className="w-5 h-5 mr-2 text-black flex-shrink-0" />
|
|
<div className="overflow-hidden relative h-[1.5rem]">
|
|
<p
|
|
className={`text-sm text-black transition-opacity duration-500 ease-in-out ${
|
|
isVisible ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
>
|
|
{messages[currentMessageIndex]}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|