// resources/js/Pages/Berita.tsx import MainLayout from '@/layouts/MainLayout'; import { Head, Link, router } from '@inertiajs/react'; import { Calendar, ChevronsRight, Search, X } from 'lucide-react'; import { useEffect, useState } from 'react'; interface BeritaItem { id: number; judul: string; slug: string; kategori: string; kutipan: string; gambar: string; tanggal_terbit: string; } interface Setting { [key: string]: string; } interface BeritaPageProps { auth?: any; beritaList: { data: BeritaItem[]; links: { url: string | null; label: string; active: boolean; }[]; }; filters: { search: string; }; settings: Setting; } const getCategoryClass = (category: string) => { switch (category) { case 'Pengumuman': return 'bg-orange-100 text-orange-800'; case 'Program Desa': return 'bg-green-100 text-green-800'; case 'Informasi': return 'bg-blue-100 text-blue-800'; case 'Kegiatan Warga': return 'bg-purple-100 text-purple-800'; case 'Kesehatan': return 'bg-pink-100 text-pink-800'; case 'Pendidikan': return 'bg-yellow-100 text-yellow-800'; default: return 'bg-gray-100 text-gray-800'; } }; export default function Berita({ auth, beritaList, filters, settings }: BeritaPageProps) { const [searchQuery, setSearchQuery] = useState(filters.search || ''); // Ambil nama desa dari settings, fallback ke "Desa" jika tidak ada const namaDesa = settings?.nama_desa || 'Desa'; useEffect(() => { setSearchQuery(filters.search || ''); }, [filters.search]); const handleSearch = (e: React.FormEvent) => { e.preventDefault(); router.get( '/berita', { search: searchQuery }, { preserveState: true, replace: true, }, ); }; const clearSearch = () => { setSearchQuery(''); router.get( '/berita', {}, { preserveState: true, replace: true, }, ); }; return (
{/* Header Section */}

Berita & Pengumuman Desa

Ikuti perkembangan, kegiatan, dan informasi terbaru dari Pemerintah {namaDesa}.

{/* Search Form */}
setSearchQuery(e.target.value)} placeholder="Cari berita..." className="w-full rounded-lg border border-gray-300 bg-white py-3 pr-12 pl-10 text-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 focus:outline-none" /> {searchQuery && ( )}
{/* Search Result Info */} {filters.search && (
{beritaList.data.length > 0 ? (

Ditemukan {beritaList.data.length} hasil untuk " hasil: " {filters.search}"

) : (

Tidak ditemukan hasil untuk " Tidak ada hasil: " {filters.search}"

)}
)}
{/* Content Section */}
{beritaList.data.length > 0 ? (
{beritaList.data.map((news) => (
{news.judul}
{news.kategori}

{news.judul}

{news.kutipan}

{news.tanggal_terbit}

Baca Baca Selengkapnya
))}
) : (

{filters.search ? 'Tidak ada berita yang sesuai dengan pencarian Anda.' : 'Belum ada berita yang diterbitkan.'}

{filters.search && ( )}
)} {/* Pagination */} {beritaList.data.length > 0 && ( )}
); }