98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import Image from "next/image";
|
|
import { CheckCircle2 } from "lucide-react";
|
|
|
|
type AgentDetailProps = {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
data: {
|
|
name: string;
|
|
position: string;
|
|
phone: string;
|
|
status: "Aktif" | "Nonaktif";
|
|
roles: string[];
|
|
imageUrl: string;
|
|
} | null;
|
|
};
|
|
|
|
export default function AgentDetailDialog({
|
|
open,
|
|
onOpenChange,
|
|
data,
|
|
}: AgentDetailProps) {
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="p-0 max-w-lg overflow-hidden rounded-2xl">
|
|
<div className="bg-gradient-to-r from-[#0f6c75] to-[#145f66] text-white px-6 py-5 relative">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-white text-xl font-semibold">
|
|
Detail Agen
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="mt-2 bg-white/20 text-white px-3 py-1 rounded-full text-xs inline-flex items-center gap-2">
|
|
<span
|
|
className={`w-2 h-2 rounded-full ${
|
|
data.status === "Aktif" ? "bg-lime-300" : "bg-red-300"
|
|
}`}
|
|
></span>
|
|
{data.status}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 text-center">
|
|
<div className="flex justify-center">
|
|
<Image
|
|
src={data.imageUrl}
|
|
alt={data.name}
|
|
width={160}
|
|
height={160}
|
|
className="rounded-lg object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<h2 className="text-xl font-semibold mt-5">{data.name}</h2>
|
|
|
|
<p className="text-gray-600">{data.position}</p>
|
|
|
|
<p className="text-gray-700 mt-2 font-medium">{data.phone}</p>
|
|
|
|
<div className="text-left mt-5">
|
|
<p className="font-semibold mb-2">Jenis Agen</p>
|
|
|
|
<div className="flex flex-wrap gap-4">
|
|
{data.roles.map((role) => (
|
|
<div
|
|
key={role}
|
|
className="flex items-center gap-2 bg-green-100 text-green-700 px-3 py-1 rounded-full font-medium"
|
|
>
|
|
<CheckCircle2 size={16} className="text-green-700" />
|
|
{role}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#E3EFF4] text-center py-3">
|
|
<button
|
|
onClick={() => onOpenChange(false)}
|
|
className="text-[#0F6C75] font-medium hover:underline"
|
|
>
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|