58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
interface ConfirmDialogProps {
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
variant?: "default" | "danger";
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
title,
|
|
message,
|
|
confirmLabel = "Confirm",
|
|
cancelLabel = "Cancel",
|
|
variant = "default",
|
|
onConfirm,
|
|
onCancel,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) onCancel();
|
|
}}
|
|
>
|
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
|
|
<p className="text-sm text-gray-600">{message}</p>
|
|
</div>
|
|
<div className="flex items-center justify-end gap-3 px-6 pb-5">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
|
>
|
|
{cancelLabel}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onConfirm}
|
|
className={
|
|
variant === "danger"
|
|
? "px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
|
|
: "px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors"
|
|
}
|
|
>
|
|
{confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|