import MainLayout from '@/layouts/MainLayout'; import { Head } from '@inertiajs/react'; import { Calendar, Eye, MapPin, Target, Users } from 'lucide-react'; import { useState } from 'react'; interface Setting { [key: string]: string; } interface Official { id: number; nama: string; jabatan: string; foto: string | null; } interface ProfilDesaProps { auth?: any; settings: Setting; officials: Official[]; } export default function ProfilDesa({ auth, settings, officials }: ProfilDesaProps) { const [selectedImage, setSelectedImage] = useState(null); const openImageModal = (src: string) => setSelectedImage(src); const closeImageModal = () => setSelectedImage(null); const namaDesa = settings.nama_desa || 'Desa Cinnong'; const kecamatan = settings.kecamatan || 'Kecamatan Sibulue'; const kabupaten = settings.kabupaten || 'Kabupaten Bone'; const provinsi = settings.provinsi || 'Sulawesi Selatan'; const jumlahRt = settings.jumlah_rt || '8'; const luas = settings.luas || '16.29'; return (
{/* Header */}

Profil Desa

Mengenal lebih dekat {namaDesa}, sejarah, visi misi, dan struktur pemerintahan desa

{/* Hero Card */}

{namaDesa}

{kecamatan}, {kabupaten}

{provinsi}

{jumlahRt} RT Luas: {luas} km²
{/* Peta Desa */}

Peta Wilayah {namaDesa}

{`Peta openImageModal(settings.gambar_peta || '/images/peta.png')} />
{/* Sejarah + Visi Misi */}
{/* Sejarah */}

Sejarah Desa

{settings.sejarah || `Sejarah ${namaDesa} belum ditambahkan.`}

{/* Visi & Misi */}

Visi

"{settings.visi || 'Visi belum ditambahkan.'}"

Misi

    {settings.misi ? ( settings.misi.split('\n').map((item, index) => (
  • {item}
    • )) ) : (
  • Misi belum ditambahkan.
    • )}
{/* Foto Tim Pemerintahan */}

Tim Pemerintahan {namaDesa}

{`Foto openImageModal(settings.gambar_tim || '/images/struktur.png')} />

Tim Pemerintahan {namaDesa}

{/* Struktur Pemerintahan Detail */}

Struktur Pemerintahan

{officials.map((official) => (
{official.nama} openImageModal(official.foto || '/images/default-avatar.png')} />

{official.nama}

{official.jabatan}

))}
{/* Image Modal */} {selectedImage && (
Gambar diperbesar e.stopPropagation()} />
Ketuk di luar gambar untuk menutup
)} ); }