import React from 'react'; import FrontLayout from '../Layouts/FrontLayout'; import { Head, Link } from '@inertiajs/react'; import { Calendar, Clock, ArrowLeft, ArrowRight, Tag, MapPin, Share2, User, ChevronRight } from 'lucide-react'; import { News } from '@/types/Frontend/Index'; import { newsShow } from '@/actions/App/Http/Controllers/FrontController'; import parse from 'html-react-parser'; interface Props { news: News; related: News[]; } const formatDate = (d: string) => new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); const formatTime = (d: string) => new Date(d).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); // ─── Category colour helper ─────────────────────────────────────────────────── const categoryColor = (cat: string) => { const map: Record = { news: 'bg-blue-600', event: 'bg-violet-600', notice: 'bg-amber-500', }; return map[cat?.toLowerCase()] ?? 'bg-slate-600'; }; const handleBack = () => window.history.back(); export default function NewsDetail({ news, related }: Props) { const isEvent = news.category?.toLowerCase() === 'event'; return (
{/* ── HERO ────────────────────────────────────────────────── */}
{/* Meta badges */}
{news.category} {formatDate(news.created_at)} {formatTime(news.created_at)}
{/* Title */}

{news.title}

{/* ── CONTENT ─────────────────────────────────────────────── */}
{/* ── MAIN ─────────────────────────────────────── */}
{/* Featured image */} {news.image && (
{news.title} {/* Category watermark */}
{news.category}
)} {/* Body */}
{/* Drop-cap first paragraph */}

{parse(news.description)}

{/* ── SIDEBAR ──────────────────────────────────── */}
{/* ── RELATED ─────────────────────────────────────────────── */} {related.length > 0 && (
{/* Section header */}
More from {news.category}

RELATED ARTICLES

{related.map((item) => ( {/* Thumbnail */}
{item.image ? {item.title} :
}
{item.category}
{/* Content */}

{formatDate(item.created_at)}

{item.title}

Read More
))}
)}
); }