Files
DentalManagementMHAprilgg/apps/Frontend/src/components/ui/deleteDialog.tsx
2026-04-04 22:13:55 -04:00

53 lines
1.3 KiB
TypeScript
Executable File

export const DeleteConfirmationDialog = ({
isOpen,
onConfirm,
onCancel,
entityName,
}: {
isOpen: boolean;
onConfirm: () => void;
onCancel: () => void;
entityName?: string;
}) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[9999] pointer-events-auto">
<div
className="bg-white p-6 rounded-md shadow-md w-[90%] max-w-md pointer-events-auto"
onClick={(e) => e.stopPropagation()}
>
<h2 className="text-xl font-semibold mb-4">Confirm Deletion</h2>
<p>
Are you sure you want to delete <strong>{entityName}</strong>?
</p>
<div className="mt-6 flex justify-end space-x-4">
<button
type="button"
className="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300"
onClick={(e) => {
e.stopPropagation();
onCancel();
}}
>
Cancel
</button>
<button
type="button"
className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
onClick={(e) => {
e.stopPropagation();
onConfirm();
}}
>
Delete
</button>
</div>
</div>
</div>
);
};