// resources/js/Pages/InfografisDesa.tsx import MainLayout from '@/layouts/MainLayout'; import { Head, Link, router } from '@inertiajs/react'; import { Image, Search, X } from 'lucide-react'; import { useEffect, useState } from 'react'; interface InfografisItem { id: number; judul: string; deskripsi: string; gambar: string; tanggal_terbit: string; } interface Setting { [key: string]: string; } interface InfografisDesaProps { auth?: any; infografisList: { data: InfografisItem[]; links: { url: string | null; label: string; active: boolean; }[]; }; filters: { search: string; }; settings: Setting; } export default function InfografisDesa({ auth, infografisList, filters, settings }: InfografisDesaProps) { 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( '/infografis', { search: searchQuery }, { preserveState: true, replace: true, }, ); }; const clearSearch = () => { setSearchQuery(''); router.get( '/infografis', {}, { preserveState: true, replace: true, }, ); }; return (
{/* Header Section - Konsisten dengan Berita & Publikasi */}

Infografis Desa

Visualisasi data dan informasi penting tentang {namaDesa} dalam bentuk yang mudah dipahami.

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

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

) : (

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

)}
)}
{/* Content Section */}
{infografisList.data.length > 0 ? ( infografisList.data.map((item) => (
{/* Image container */}
{item.judul}
{/* Content */}

{item.tanggal_terbit}

{item.judul}

{item.deskripsi}

{/* CTA */}
Lihat Detail Lihat Infografis Lengkap
)) ) : ( /* Empty state */

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

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

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