import { NewsItemTooltips } from '@/components/game/item-tooltip'; import { Head, router, usePage } from '@inertiajs/react'; import { motion } from 'framer-motion'; import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react'; import { useMemo, useState } from 'react'; import { getCategoryBadge } from '../components/category-badge'; import { Footer } from '../components/footer-section'; import { NavigationBar } from '../components/navigation-bar'; import { NewsBackground } from '../components/news-background'; import { Preload } from '../components/preload'; import { useForceDarkTheme } from '../components/use-force-dark-theme'; interface SocialMediaSettings { facebook: { enabled: boolean; url: string }; discord: { enabled: boolean; url: string }; instagram: { enabled: boolean; url: string }; tiktok: { enabled: boolean; url: string }; youtube: { enabled: boolean; url: string }; } const DiscordIcon = ({ className }: { className?: string }) => ( ); const YouTubeIcon = ({ className }: { className?: string }) => ( ); const InstagramIcon = ({ className }: { className?: string }) => ( ); const TikTokIcon = ({ className }: { className?: string }) => ( ); const FacebookIcon = ({ className }: { className?: string }) => ( ); 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 NewsListItem { id: number; slug: string; title: string; category: 'patch' | 'download' | 'guide' | 'promo' | 'event'; image: string | null; created_at: string; } interface ServerInfo { appName: string; newsBackgroundUrl?: string | null; newsSmokeEnabled: boolean; newsSparksEnabled: boolean; } interface Props { news: News; allNews: NewsListItem[]; appName: string; serverInfo: ServerInfo; } export default function NewsShow({ news, allNews, appName, serverInfo }: Props) { const { appLogoUrl, appFont } = usePage().props as { appLogoUrl?: string | null; appFont?: string }; const [currentPage, setCurrentPage] = useState(1); const perPage = 10; const totalPages = Math.ceil(allNews.length / perPage); const visibleNews = allNews.slice((currentPage - 1) * perPage, currentPage * perPage); useForceDarkTheme(); const { socialMedia } = usePage().props as { socialMedia?: SocialMediaSettings }; const _enabledSocials = useMemo(() => { const result = []; if (socialMedia?.discord?.enabled && socialMedia.discord.url) { result.push({ key: 'discord', url: socialMedia.discord.url, Icon: DiscordIcon, label: 'Discord' }); } if (socialMedia?.youtube?.enabled && socialMedia.youtube.url) { result.push({ key: 'youtube', url: socialMedia.youtube.url, Icon: YouTubeIcon, label: 'YouTube' }); } if (socialMedia?.instagram?.enabled && socialMedia.instagram.url) { result.push({ key: 'instagram', url: socialMedia.instagram.url, Icon: InstagramIcon, label: 'Instagram' }); } if (socialMedia?.tiktok?.enabled && socialMedia.tiktok.url) { result.push({ key: 'tiktok', url: socialMedia.tiktok.url, Icon: TikTokIcon, label: 'TikTok' }); } if (socialMedia?.facebook?.enabled && socialMedia.facebook.url) { result.push({ key: 'facebook', url: socialMedia.facebook.url, Icon: FacebookIcon, label: 'Facebook' }); } return result; }, [socialMedia]); const handleNewsClick = async (newsItem: NewsListItem) => { if (newsItem.slug === news.slug) return; router.visit(`/news/${newsItem.slug}`, { preserveScroll: false, preserveState: false, }); }; const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric', }); }; const stripFirstHeading = (html: string) => { return html.replace(/]*>.*?<\/h[1-6]>/i, '').trim(); }; return ( <>
{/* Split Layout: Sidebar + Content */}
{/* Sidebar - Left */}
All News
{visibleNews.map((item) => ( ))}
{totalPages > 1 && (
{currentPage} / {totalPages}
)}
{/* Content - Right */}
{/* News Image */} {news.image && (
{ console.error('News image load failed:', e.currentTarget.src); e.currentTarget.style.display = 'none'; }} initial={{ scale: 1.05 }} animate={{ scale: 1 }} transition={{ duration: 0.7, ease: 'easeOut' }} />
{(() => { const full = `Perfect World ${appName}`; const len = full.length; const cut1 = Math.max(1, Math.ceil(len * 0.4)); const cut2 = Math.min(len - 1, cut1 + Math.max(1, Math.ceil(len * 0.2))); return ( <> {full.slice(0, cut1)} {full.slice(cut1, cut2)} {full.slice(cut2)} ); })()}
)} {/* Category & Date */}
{getCategoryBadge(news.category)} {new Date(news.created_at).toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric', })}
{/* News Content */}
); }