Archived
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
interface DeleteConfirmDialogProps {
|
|
title: string;
|
|
message: string;
|
|
onConfirm: () => Promise<void>;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function DeleteConfirmDialog({
|
|
title,
|
|
message,
|
|
onConfirm,
|
|
children,
|
|
}: DeleteConfirmDialogProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleConfirm = async () => {
|
|
setLoading(true);
|
|
await onConfirm();
|
|
setLoading(false);
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<span onClick={() => setOpen(true)}>{children}</span>
|
|
{open && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
|
<div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full mx-4">
|
|
<h3 className="text-lg font-bold mb-2">{title}</h3>
|
|
<p className="text-gray-600 mb-6">{message}</p>
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={() => setOpen(false)}
|
|
className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50"
|
|
disabled={loading}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleConfirm}
|
|
disabled={loading}
|
|
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50"
|
|
>
|
|
{loading ? "Deleting..." : "Delete"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|