98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { FileText } from "lucide-react";
|
|
|
|
interface DialogCampaignDetailProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
data?: {
|
|
durasi: string;
|
|
media: string;
|
|
tujuan: string;
|
|
materi: string;
|
|
status: string;
|
|
};
|
|
}
|
|
|
|
export default function DialogCampaignDetail({
|
|
isOpen,
|
|
onClose,
|
|
data,
|
|
}: DialogCampaignDetailProps) {
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-lg font-semibold">Detail</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
{/* Status */}
|
|
<div>
|
|
<span className="bg-green-100 text-green-700 border border-green-600 px-3 py-1 rounded-full text-xs font-medium">
|
|
{data.status}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Detail Info */}
|
|
<div className="space-y-2 text-sm">
|
|
<p>
|
|
<span className="text-gray-500">Durasi</span>
|
|
<br />
|
|
<span className="font-semibold">{data.durasi}</span>
|
|
</p>
|
|
|
|
<p>
|
|
<span className="text-gray-500">Media</span>
|
|
<br />
|
|
<span className="font-semibold">{data.media}</span>
|
|
</p>
|
|
|
|
<p>
|
|
<span className="text-gray-500">Tujuan</span>
|
|
<br />
|
|
<span className="font-semibold">{data.tujuan}</span>
|
|
</p>
|
|
|
|
<p>
|
|
<span className="text-gray-500">Materi Promote</span>
|
|
</p>
|
|
|
|
{/* File Box */}
|
|
<div className="border rounded-lg p-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="text-gray-500" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-800">
|
|
Report_name_T1.pdf
|
|
</p>
|
|
<p className="text-xs text-gray-500">23.5MB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="flex justify-end gap-3 mt-4">
|
|
<Button variant="outline" onClick={onClose} className="w-28">
|
|
Cancel
|
|
</Button>
|
|
<Button className="bg-blue-600 hover:bg-blue-700 text-white w-28">
|
|
Next
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|