53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { AlertTriangle, X } from 'lucide-react';
|
|
|
|
interface ConfirmModalProps {
|
|
isOpen: boolean;
|
|
title?: string;
|
|
message?: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[6000] flex items-center justify-center p-4">
|
|
{/* Backdrop */}
|
|
<div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={onCancel} />
|
|
|
|
{/* Modal Content */}
|
|
<div className="relative w-full max-w-sm bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-500 shadow-inner">
|
|
<AlertTriangle className="w-6 h-6" />
|
|
</div>
|
|
<button onClick={onCancel} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
|
<X className="w-5 h-5 text-gray-400" />
|
|
</button>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-black text-gray-900 mb-2">{title || 'Xác nhận'}</h3>
|
|
<p className="text-sm text-gray-500 mb-8 leading-relaxed">
|
|
{message || 'Bạn có chắc chắn muốn thực hiện hành động này không?'}
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<button
|
|
onClick={onCancel}
|
|
className="py-4 bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold rounded-2xl transition-all active:scale-95"
|
|
>
|
|
Hủy bỏ
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className="py-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-2xl shadow-lg shadow-red-100 transition-all active:scale-95"
|
|
>
|
|
Xác nhận
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |