import { Button } from '@/components/ui/button'; import { Head, router, usePage } from '@inertiajs/react'; import { useEffect, useState } from 'react'; import { route } from '@/lib/route-helper'; import { motion } from 'framer-motion'; import { Bookmark, Calendar, ChevronLeft, ChevronRight, Tag } from 'lucide-react'; import { Footer } from '../components/footer-section'; import { NavigationBar } from '../components/navigation-bar'; import { NewsBackground } from '../components/news-background'; import { Preload } from '../components/preload'; import { cn } from '@/lib/utils'; import { getCategoryBadge } from '../components/category-badge'; import { formatDate, truncateContent } from '../components/date-utils'; import { HeroSection } from '../components/hero-section'; import { useForceDarkTheme } from '../components/use-force-dark-theme'; interface News { id: number; title: string; slug: string; category: 'patch' | 'download' | 'guide' | 'promo' | 'event'; image: string | null; content: string; is_active: boolean; created_at: string; updated_at: string; } interface ServerInfo { appName: string; heroBackgroundUrl?: string | null; heroBackgroundWebP?: string | null; newsBackgroundUrl?: string | null; heroHeight?: number; smokeEnabled: boolean; newsSmokeEnabled: boolean; newsSparksEnabled: boolean; appNameColor?: string; serverStartTime?: string | null; heroUseLogo?: boolean; heroLogoUrl?: string | null; heroLogoSize?: number; } interface DownloadItem { id: number; name: string; description: string; size: string; url: string; icon_name: string; mirror_url?: string; mirror_icon?: string; sort_order: number; is_active: boolean; } interface Props { news: News[]; appName: string; serverInfo: ServerInfo; downloadItems?: DownloadItem[]; } export default function NewsIndex({ news, appName, serverInfo, downloadItems: _downloadItems = [] }: Props) { const { appLogoUrl, appFont } = usePage().props as { appLogoUrl?: string | null; appFont?: string }; // Force dark theme useForceDarkTheme(); const [selectedCategory, setSelectedCategory] = useState('all'); const [currentPage, setCurrentPage] = useState(1); const [navigatingSlug, setNavigatingSlug] = useState(null); const itemsPerPage = 9; const filteredNews = selectedCategory === 'all' ? news : news.filter((item) => item.category === selectedCategory); const paginatedNews = filteredNews.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); const totalPages = Math.ceil(filteredNews.length / itemsPerPage); useEffect(() => { setCurrentPage(1); }, [selectedCategory]); const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.08, delayChildren: 0.1, }, }, }; const itemVariants = { hidden: { opacity: 0, y: 30, scale: 0.97 }, visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.45, ease: 'easeOut' as const } }, }; const handleCardClick = (e: React.MouseEvent, newsSlug: string) => { e.preventDefault(); setNavigatingSlug(newsSlug); setTimeout(() => { router.visit(route('news.show', { slug: newsSlug }), { preserveScroll: false, preserveState: false, }); }, 400); }; return ( <>
{/* Hero Section */} {/* News Section with unified background */} {/* News Section Header */}
{/* Section Header */}
Latest Updates

News

✦
{/* Filter */}
{['all', 'patch', 'download', 'guide', 'promo', 'event'].map((category) => ( ))}
{/* News Grid */}
{paginatedNews.length > 0 ? ( {paginatedNews.map((item, index) => ( handleCardClick(e, item.slug)} > {/* Featured styling for first item */} {index === 0 && (
Featured
)} {item.image ? (
{ e.currentTarget.style.display = 'none'; }} animate={navigatingSlug === item.slug ? { scale: 1.1 } : { scale: 1 }} transition={{ duration: 0.5 }} />
{getCategoryBadge(item.category)}
) : (
{getCategoryBadge(item.category)}
)}
{formatDate(item.created_at)}

{item.title}

{truncateContent(item.content)}

Read full article Read More
))} ) : (

No News Available

There are currently no news articles to display.

)} {/* Pagination Controls */} {filteredNews.length > itemsPerPage && (
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => { let pageNum; if (totalPages <= 5) { pageNum = i + 1; } else if (currentPage <= 3) { pageNum = i + 1; } else if (currentPage >= totalPages - 2) { pageNum = totalPages - 4 + i; } else { pageNum = currentPage - 2 + i; } return ( ); })}
)} {/* Page Info */} {filteredNews.length > 0 && (
Showing {(currentPage - 1) * itemsPerPage + 1} - {Math.min(currentPage * itemsPerPage, filteredNews.length)}{' '} of {filteredNews.length} news items
)}
{/* Spacer */}
); }