import MainLayout from '@/layouts/MainLayout'; import { Head, Link, router } from '@inertiajs/react'; import { Download, File as FileIcon, FileSpreadsheet, FileText, FileType, Search, X } from 'lucide-react'; import { useEffect, useState } from 'react'; interface PublikasiItem { id: number; judul: string; deskripsi: string; tanggal_publikasi: string; tipe_file: string; ukuran_file: string; } interface Setting { [key: string]: string; } interface PageProps { auth?: any; publikasiList: { data: PublikasiItem[]; links: { url: string | null; label: string; active: boolean; }[]; }; filters: { search: string; }; settings: Setting; } const FileTypeIcon = ({ type }: { type: string }) => { switch (type.toLowerCase()) { case 'pdf': return ; case 'doc': case 'docx': return ; case 'xls': case 'xlsx': return ; default: return ; } }; export default function Publikasi({ auth, publikasiList, filters, settings }: PageProps) { const [searchQuery, setSearchQuery] = useState(filters.search || ''); // Ambil nama desa dari settings, fallback ke "Desa" jika tidak ada const namaDesa = settings?.nama_desa || 'Desa'; // Update local state when filters change (for back button) useEffect(() => { setSearchQuery(filters.search || ''); }, [filters.search]); const handleSearch = (e: React.FormEvent) => { e.preventDefault(); router.get( route('publikasi.index'), { search: searchQuery }, { preserveState: true, replace: true, }, ); }; const clearSearch = () => { setSearchQuery(''); router.get( route('publikasi.index'), {}, { preserveState: true, replace: true, }, ); }; return (
{/* Header Section dengan Search */}

Publikasi Dokumen Desa

Akses dan unduh dokumen resmi dan informasi publik dari {namaDesa}.

{/* Search Form */}
setSearchQuery(e.target.value)} placeholder="Cari dokumen..." 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 && (
{publikasiList.data.length > 0 ? (

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

) : (

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

)}
)}
{/* Content Section */}
{publikasiList.data.length > 0 ? ( publikasiList.data.map((item) => (

{item.judul}

{item.deskripsi}

Dipublikasikan: {item.tanggal_publikasi} | Tipe: {item.tipe_file} | Ukuran: {item.ukuran_file}
)) ) : ( /* Empty state */

{filters.search ? 'Tidak ada dokumen yang sesuai dengan pencarian Anda.' : 'Belum Ada Publikasi'}

{filters.search ? 'Coba gunakan kata kunci yang berbeda.' : 'Saat ini belum ada dokumen yang dipublikasikan.'}

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