44 lines
2.1 KiB
JavaScript
44 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import { AlertTriangle, X } from 'lucide-react';
|
|
|
|
export default function DeleteConfirmationModal({ isOpen, onClose, onConfirm, branchName, loading }) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
|
|
<div className="bg-white w-full max-w-sm rounded-xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300">
|
|
<div className="p-6 text-center space-y-4">
|
|
<div className="w-16 h-16 bg-rose-50 rounded-full flex items-center justify-center text-rose-500 mx-auto">
|
|
<AlertTriangle size={32} />
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-lg font-bold text-gray-900">Delete Branch?</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Are you sure you want to delete <span className="text-gray-900 font-medium">"{branchName}"</span>?
|
|
This action cannot be undone.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
onClick={onClose}
|
|
disabled={loading}
|
|
className="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={loading}
|
|
className="flex-1 py-2 bg-rose-500 text-white rounded-lg text-sm font-medium hover:bg-rose-600 transition-all disabled:opacity-50"
|
|
>
|
|
{loading ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|