// resources/js/Pages/Beranda.tsx import MainLayout from '@/layouts/MainLayout'; import { Head, Link } from '@inertiajs/react'; import { BarChart3, Building2, Calendar, MapPin, Newspaper, TrendingUp, Users } from 'lucide-react'; // Tipe data untuk satu item berita interface BeritaItem { slug: string; judul: string; kategori: string; tanggal_terbit: string; kutipan: string; gambar: string | null; } // Tipe data untuk settings interface Settings { nama_desa?: string; stat1_label?: string; stat1_value?: string; stat2_label?: string; stat2_value?: string; stat3_label?: string; stat3_value?: string; data_terakhir?: string; [key: string]: string | undefined; } // Tipe data untuk props halaman Beranda interface BerandaProps { beritaTerbaru: BeritaItem[]; settings: Settings; auth?: any; } // Fungsi untuk menentukan warna badge berdasarkan kategori 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'; } }; // Fungsi untuk menentukan icon berdasarkan label statistik const getStatIcon = (label: string) => { const lowerLabel = label.toLowerCase(); if (lowerLabel.includes('penduduk') || lowerLabel.includes('jiwa') || lowerLabel.includes('warga')) { return Users; } else if (lowerLabel.includes('dusun') || lowerLabel.includes('rw') || lowerLabel.includes('rt') || lowerLabel.includes('wilayah')) { return Building2; } else if ( lowerLabel.includes('sekolah') || lowerLabel.includes('pendidikan') || lowerLabel.includes('kesehatan') || lowerLabel.includes('rumah sakit') || lowerLabel.includes('puskesmas') || lowerLabel.includes('posyandu') ) { return TrendingUp; } return BarChart3; // default icon }; export default function Beranda({ auth, beritaTerbaru, settings }: BerandaProps) { // Ambil nama desa dari settings atau gunakan default const namaDesa = settings.nama_desa || 'Desa Cinnong'; // Siapkan data statistik const stats = [ { label: settings.stat1_label || 'Total Penduduk', value: settings.stat1_value || '0', icon: getStatIcon(settings.stat1_label || 'Total Penduduk'), }, { label: settings.stat2_label || 'Jumlah Dusun', value: settings.stat2_value || '0', icon: getStatIcon(settings.stat2_label || 'Jumlah Dusun'), }, { label: settings.stat3_label || 'Sekolah', value: settings.stat3_value || '0', icon: getStatIcon(settings.stat3_label || 'Sekolah'), }, { label: 'Data Terakhir', value: settings.data_terakhir || new Date().getFullYear().toString(), icon: Calendar, }, ]; return (
{/* Hero Section - Mobile optimized */}

Selamat Datang di {namaDesa}

Sistem informasi desa yang menyediakan data terkini tentang profil desa, statistik penduduk, dan informasi ekonomi untuk transparansi dan kemudahan akses.

{/* CTA Buttons - Mobile stacked */}
{/* Stats Section - Mobile grid optimization */}

Data Terkini {namaDesa}

Informasi statistik dan demografis terbaru

{/* Mobile 2x2 grid, tablet 2x2, desktop 1x4 */}
{stats.map((stat, index) => { const IconComponent = stat.icon; return (
{stat.value}
{stat.label}
); })}
{/* News/Updates Section - Mobile card optimization */}

Berita & Pengumuman Terbaru

Informasi terkini dari {namaDesa}

{/* Mobile single column, tablet 2 col, desktop 3 col */}
{beritaTerbaru.map((berita) => ( {/* Image container with aspect ratio */}
{berita.gambar ? ( {berita.judul} ) : (
)}
{/* Content with proper mobile spacing */}
{berita.kategori}

{berita.judul}

{berita.tanggal_terbit}

{berita.kutipan}

))}
{/* Mobile optimized CTA button */}
Semua Berita Lihat Semua Berita
); }