49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
|
interface DeleteConfirmModalProps {
|
||
|
|
title: string
|
||
|
|
message: string
|
||
|
|
onConfirm: () => void
|
||
|
|
onCancel: () => void
|
||
|
|
isDeleting?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export function DeleteConfirmModal({
|
||
|
|
title,
|
||
|
|
message,
|
||
|
|
onConfirm,
|
||
|
|
onCancel,
|
||
|
|
isDeleting,
|
||
|
|
}: DeleteConfirmModalProps) {
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||
|
|
<div className="fixed inset-0 bg-black/50" onClick={onCancel} />
|
||
|
|
<div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4">
|
||
|
|
<div className="px-6 py-4">
|
||
|
|
<h2 className="text-lg font-semibold text-red-600 dark:text-red-400">
|
||
|
|
{title}
|
||
|
|
</h2>
|
||
|
|
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||
|
|
{message}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onCancel}
|
||
|
|
className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onConfirm}
|
||
|
|
disabled={isDeleting}
|
||
|
|
className="px-4 py-2 text-sm font-medium rounded-md bg-red-600 text-white hover:bg-red-700 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{isDeleting ? 'Deleting...' : 'Delete'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|