import React, { useState } from 'react'; import { Head, Link } from '@inertiajs/react'; import PortalLayout from '@/layouts/portal-layout'; import { Calendar, ChevronLeft, User, ArrowRight, Share2, Check, Clock, } from 'lucide-react'; import '../../../css/alumni-home.css'; import { toast } from 'sonner'; interface NewsItem { id: number; title: string; slug: string; excerpt?: string; content?: string; thumbnail?: string; published_at: string; category?: { id: number; name: string; slug: string; }; author?: { name: string; }; } interface DetailProps { news: NewsItem; relatedNews: NewsItem[]; } export default function NewsDetail({ news, relatedNews }: DetailProps) { const [copied, setCopied] = useState(false); const formatDate = (dateString?: string) => { if (!dateString) return '-'; try { return new Date(dateString).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric', }); } catch { return dateString; } }; const handleCopyLink = () => { if (typeof window !== 'undefined' && navigator.clipboard) { navigator.clipboard .writeText(window.location.href) .then(() => { setCopied(true); setTimeout(() => setCopied(false), 2500); }) .catch(() => { toast.error( 'Tautan gagal disalin. Salin alamat dari bilah browser.', ); }); } }; // Estimasi waktu baca (rata-rata 200 kata per menit) const wordCount = (news.content || '') .trim() .split(/\s+/) .filter(Boolean).length; const readingTime = Math.max(1, Math.ceil(wordCount / 200)); return (
{/* Breadcrumb / Top Bar with staggered entrance */} {/* Article Header & Main Container with staggered appearance */}
{/* Eyebrow & Category */}
{news.category?.name || 'Kabar Fakultas'} {readingTime} menit baca
{/* Title - Source Serif 4 Display */}

{news.title}

{/* Meta: Author, Date */}
{news.author?.name || 'Humas Fakultas Teknik UNMA'}
•
{/* Hero Image with subtle hover zoom */} {news.thumbnail && (
{news.title}
Dokumentasi resmi: {news.title}
)} {/* Excerpt Lead */} {news.excerpt && (
{news.excerpt}
)} {/* Article Body */}
{news.content ?.split('\n\n') .map((paragraph, idx) => { const cleanPara = paragraph.trim(); if (!cleanPara) return null; return (

{cleanPara}

); })}
{/* Bottom Actions & Share */}
Diterbitkan oleh{' '} Fakultas Teknik Universitas Majalengka
{/* Related News Section with hover lift */} {relatedNews.length > 0 && (

REKOMENDASI ARTIKEL

Lihat Semua Berita
{relatedNews.map((item, idx) => (
{item.thumbnail &&
{item.title}
}
{item.category?.name || 'Berita'} {formatDate( item.published_at, )}

{item.title}

{item.excerpt && (

{item.excerpt}

)}
Baca Artikel
))}
)}
); }