109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { Megaphone } from "lucide-react";
|
|
import { Link } from "@inertiajs/react";
|
|
import { Post } from "@/components/DetailArtikel/types";
|
|
|
|
interface RunningTextProps {
|
|
posts: Post[];
|
|
}
|
|
|
|
export default function RunningText({ posts }: RunningTextProps) {
|
|
const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
const [isPaused, setIsPaused] = useState(false);
|
|
|
|
const getLatestPostsByCategory = () => {
|
|
const groupedPosts = posts.reduce((acc, post) => {
|
|
const category = post.kategori?.NamaKategori || "Uncategorized";
|
|
if (!acc[category]) {
|
|
acc[category] = [];
|
|
}
|
|
acc[category].push(post);
|
|
return acc;
|
|
}, {} as Record<string, Post[]>);
|
|
|
|
// Get latest 2 posts from each category and flatten
|
|
return Object.values(groupedPosts)
|
|
.map((categoryPosts) =>
|
|
categoryPosts
|
|
.sort(
|
|
(a, b) =>
|
|
new Date(b.created_at).getTime() -
|
|
new Date(a.created_at).getTime()
|
|
)
|
|
.slice(0, 2)
|
|
)
|
|
.flat();
|
|
};
|
|
|
|
const messages = getLatestPostsByCategory();
|
|
|
|
useEffect(() => {
|
|
if (isPaused || messages.length === 0) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setIsVisible(false);
|
|
|
|
setTimeout(() => {
|
|
setCurrentMessageIndex(
|
|
(prevIndex) => (prevIndex + 1) % messages.length
|
|
);
|
|
setIsVisible(true);
|
|
}, 500);
|
|
}, 3000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [isPaused, messages.length]);
|
|
|
|
const getRouteByCategory = (kategori: string, slug: string) => {
|
|
const routes: { [key: string]: string } = {
|
|
Pengumuman: `/pengumuman/${slug}`,
|
|
Peraturan: `/peraturan/${slug}`,
|
|
Undangan: `/undangan/${slug}`,
|
|
};
|
|
|
|
return routes[kategori] || `/sekilasinfo/${slug}`;
|
|
};
|
|
|
|
if (messages.length === 0) return null;
|
|
|
|
return (
|
|
<div
|
|
className="w-full bg-green-100 p-2 flex overflow-hidden"
|
|
onMouseEnter={() => setIsPaused(true)}
|
|
onMouseLeave={() => setIsPaused(false)}
|
|
>
|
|
<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]">
|
|
<Link
|
|
href={getRouteByCategory(
|
|
messages[currentMessageIndex].kategori
|
|
?.NamaKategori || "",
|
|
messages[currentMessageIndex].SlugPost
|
|
)}
|
|
className="hover:text-green-700 transition-colors"
|
|
>
|
|
<p
|
|
className={`text-sm text-black transition-opacity duration-500 ease-in-out ${
|
|
isVisible ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
>
|
|
<span className="font-semibold mr-2 bg-green-600 p-1 text-white text-xs rounded">
|
|
{
|
|
messages[currentMessageIndex].kategori
|
|
?.NamaKategori
|
|
}
|
|
</span>
|
|
<span>
|
|
{" "}
|
|
{messages[currentMessageIndex].JudulPost}
|
|
</span>
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|