84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { MapPin, Phone, Eye, Building2, Star } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
interface Posyandu {
|
|
id: string
|
|
nama_posyandu: string
|
|
alamat: string
|
|
kontak: string | null
|
|
latitude: number | null
|
|
longitude: number | null
|
|
link_google_maps: string | null
|
|
petugas?: {
|
|
nama_petugas: string
|
|
nomor_hp: string | null
|
|
jabatan: string | null
|
|
}[]
|
|
reviews?: {
|
|
rating: number
|
|
ulasan: string
|
|
nama_pengulas: string
|
|
}[]
|
|
}
|
|
|
|
interface Props {
|
|
data: Posyandu
|
|
}
|
|
|
|
export default function PosyanduCard({ data }: Props) {
|
|
return (
|
|
<div className="group bg-white rounded-3xl border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all overflow-hidden flex flex-col h-full">
|
|
<div className="p-6 bg-purple-600 border-b-2 border-black flex justify-between items-center">
|
|
<div className="p-2 bg-white rounded-xl border-2 border-black">
|
|
<Building2 className="w-6 h-6 text-purple-600" />
|
|
</div>
|
|
{data.reviews && data.reviews.length > 0 && (
|
|
<div className="flex items-center gap-1.5 px-3 py-1 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
|
|
<Star className="w-3.5 h-3.5 text-yellow-400 fill-current" />
|
|
<span className="text-xs font-black">
|
|
{(data.reviews.reduce((acc, r) => acc + r.rating, 0) / data.reviews.length).toFixed(1)}
|
|
</span>
|
|
<span className="text-[10px] text-gray-400 font-bold">({data.reviews.length})</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-6 flex-1 flex flex-col gap-4">
|
|
<div className="flex flex-col gap-1">
|
|
<h3 className="text-xl font-black text-gray-900 group-hover:text-purple-600 transition-colors uppercase">
|
|
{data.nama_posyandu}
|
|
</h3>
|
|
<div className="flex items-center gap-1.5 text-gray-500 text-xs font-semibold">
|
|
<MapPin className="w-3 h-3 flex-shrink-0" />
|
|
<span className="line-clamp-1">{data.alamat}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2 mt-auto">
|
|
<div className="px-3 py-1 bg-gray-50 border border-gray-100 rounded-lg text-[10px] font-bold text-gray-500 flex items-center gap-1.5">
|
|
<span className="text-purple-600">{data.petugas?.length || 0}</span> Petugas
|
|
</div>
|
|
{data.kontak && (
|
|
<div className="px-3 py-1 bg-gray-50 border border-gray-100 rounded-lg text-[10px] font-bold text-gray-500 flex items-center gap-1.5">
|
|
<Phone className="w-3 h-3 text-emerald-500" />
|
|
{data.kontak}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 pt-0">
|
|
<Link
|
|
href={`/user-dashboard/lokasi-posyandu/${data.id}`}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-black text-white font-black rounded-2xl hover:bg-gray-900 transition-all shadow-[4px_4px_0px_0px_rgba(147,51,234,0.5)] hover:shadow-none hover:translate-x-[1px] hover:translate-y-[1px]"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
LIHAT DETAIL & REVIEW
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|