43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { X } from 'lucide-react';
|
|
|
|
interface ConfirmModalProps {
|
|
isOpen: boolean;
|
|
title?: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
|
isOpen,
|
|
title = 'Xác nhận',
|
|
message,
|
|
confirmText = 'Xác nhận',
|
|
cancelText = 'Hủy',
|
|
onConfirm,
|
|
onCancel,
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[2200] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-gray-900/70 backdrop-blur-sm" onClick={onCancel} />
|
|
<div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
|
|
<h3 className="text-base font-bold text-gray-900">{title}</h3>
|
|
<p className="mt-2 text-sm text-gray-600">{message}</p>
|
|
<div className="mt-4 flex justify-end gap-2">
|
|
<button onClick={onCancel} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
|
|
{cancelText}
|
|
</button>
|
|
<button onClick={onConfirm} className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors">
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|