mediahub-fe/components/form/ticketing/info-lainnya.tsx

73 lines
1.8 KiB
TypeScript

// InfoLainnyaModal.tsx
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { DetailTicket } from "./info-lainnya-types";
interface InfoLainnyaModalProps {
open: boolean;
onClose: () => void;
data: DetailTicket["emergencyIssue"];
}
export default function InfoLainnyaModal({
open,
onClose,
data,
}: InfoLainnyaModalProps) {
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Info Lainnya</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="font-medium">Tanggal</div>
<div>:{data?.date}</div>
<div className="font-medium">Lokasi Kejadian</div>
<div>:{data?.location}</div>
<div className="font-medium">Isu Menonjol</div>
<div>:{data?.title}</div>
<div className="font-medium">Urgensi</div>
<div>:{data?.urgencyName}</div>
<div className="font-medium">Rekomendasi Tindak Lanjut</div>
<div>:{data?.recommendationName}</div>
<div className="font-medium">Link Pendukung</div>
<div>
:
<a
href={data?.link}
className="text-blue-600"
target="_blank"
rel="noopener noreferrer"
>
{data?.link}
</a>
</div>
{data?.uploadFiles && (
<>
<div className="font-medium">Lampiran</div>
<div>
<img
src={data?.uploadFiles}
alt="Lampiran"
className="max-w-xs"
/>
</div>
</>
)}
</div>
</DialogContent>
</Dialog>
);
}