66 lines
3.3 KiB
JavaScript
66 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import { AlertCircle, X, Trash2 } from 'lucide-react';
|
|
|
|
export default function DeleteModal({ isOpen, onClose, onConfirm, title, message, itemName }) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="bg-white rounded-[2.5rem] w-full max-w-md shadow-2xl border border-gray-100 overflow-hidden animate-in zoom-in duration-300">
|
|
{/* Header */}
|
|
<div className="p-8 border-b border-gray-50 flex items-center justify-between bg-red-50/30">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-red-100 text-red-600 rounded-2xl">
|
|
<AlertCircle size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-black text-gray-900">{title || 'Confirm Delete'}</h3>
|
|
<p className="text-[10px] font-bold text-red-400 uppercase tracking-widest mt-0.5">Dangerous Action</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-white rounded-full transition-colors text-gray-400 hover:text-gray-900 shadow-sm outline-none"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="p-10 text-center space-y-6">
|
|
<div className="space-y-3">
|
|
<p className="text-sm font-semibold text-gray-500 leading-relaxed">
|
|
{message || "Are you sure you want to delete this item? This action cannot be undone."}
|
|
</p>
|
|
{itemName && (
|
|
<div className="px-4 py-2 bg-gray-50 rounded-xl border border-gray-100 inline-block">
|
|
<span className="text-sm font-black text-gray-900">{itemName}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="p-8 bg-gray-50/50 border-t border-gray-50 flex gap-4">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 px-6 py-4 bg-white border border-gray-200 text-gray-600 rounded-2xl font-black text-xs hover:bg-gray-50 transition-all shadow-sm outline-none"
|
|
>
|
|
CANCEL
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
onConfirm();
|
|
onClose();
|
|
}}
|
|
className="flex-1 px-6 py-4 bg-red-600 text-white rounded-2xl font-black text-xs hover:bg-red-700 hover:scale-[1.02] active:scale-95 transition-all shadow-lg shadow-red-100 flex items-center justify-center gap-2 outline-none"
|
|
>
|
|
<Trash2 size={16} />
|
|
DELETE PERMANENTLY
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|