44 lines
2.2 KiB
JavaScript
44 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { X, AlertTriangle, Loader2 } from 'lucide-react';
|
|
|
|
export default function DeleteConfirmationModal({ isOpen, onClose, onConfirm, title, message, isDeleting }) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[10001] flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="bg-white rounded-[32px] w-full max-w-sm shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
|
|
<div className="p-8 flex flex-col items-center text-center">
|
|
<div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center text-red-500 mb-6">
|
|
<AlertTriangle size={32} />
|
|
</div>
|
|
|
|
<h3 className="text-xl font-black text-gray-900 mb-2">
|
|
{title || 'Are you sure?'}
|
|
</h3>
|
|
|
|
<p className="text-gray-500 text-sm font-medium leading-relaxed mb-8">
|
|
{message || 'This action cannot be undone. All data associated with this item will be permanently removed.'}
|
|
</p>
|
|
|
|
<div className="flex gap-3 w-full">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isDeleting}
|
|
className="flex-1 py-4 border border-gray-100 rounded-2xl font-bold text-gray-500 hover:bg-gray-50 transition-all text-sm disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={isDeleting}
|
|
className="flex-1 py-4 bg-red-500 text-white rounded-2xl font-bold hover:bg-red-600 transition-all disabled:opacity-50 flex items-center justify-center gap-2 text-sm shadow-lg shadow-red-100"
|
|
>
|
|
{isDeleting ? <Loader2 className="animate-spin" size={18} /> : 'Delete Now'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|