97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import Image from "next/image";
|
|
import { CheckCircle } from "lucide-react";
|
|
|
|
export function DialogDetailGaleri({ open, onClose, data }: any) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-3xl rounded-2xl p-0 overflow-hidden">
|
|
{/* Header */}
|
|
<div className="bg-[#1F6779] text-white px-6 py-4">
|
|
<DialogTitle className="text-white">Detail Galeri</DialogTitle>
|
|
</div>
|
|
|
|
<div className="px-6 py-6 space-y-6">
|
|
{/* Images */}
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="relative h-28 w-full">
|
|
<Image
|
|
src={data.image_url}
|
|
alt="Galery Image"
|
|
fill
|
|
className="object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h2 className="text-2xl font-semibold text-[#1F6779]">
|
|
{data.title}
|
|
</h2>
|
|
|
|
{/* Deskripsi */}
|
|
<div>
|
|
<p className="font-medium text-sm text-gray-700">Deskripsi</p>
|
|
<p className="text-gray-600">{data.desc}</p>
|
|
</div>
|
|
|
|
{/* Tanggal Upload */}
|
|
<div>
|
|
<p className="font-medium text-sm text-gray-700">Tanggal Upload</p>
|
|
<p className="text-gray-600">
|
|
{new Date(data.created_at).toLocaleDateString("id-ID")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Timeline */}
|
|
<div>
|
|
<p className="font-medium text-sm text-gray-700 mb-2">
|
|
Status Timeline
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle className="text-green-600" />
|
|
<div>
|
|
<p className="font-semibold">Upload Berhasil</p>
|
|
<p className="text-gray-500 text-sm">
|
|
{new Date(data.created_at).toLocaleString("id-ID")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{data.approved_at && (
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle className="text-green-600" />
|
|
<div>
|
|
<p className="font-semibold">Disetujui oleh Approver</p>
|
|
<p className="text-gray-500 text-sm">
|
|
{new Date(data.approved_at).toLocaleString("id-ID")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<DialogFooter className="px-6 pb-6">
|
|
<button
|
|
onClick={onClose}
|
|
className="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg"
|
|
>
|
|
Tutup
|
|
</button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|