49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
interface ConfirmModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
title: string;
|
||
|
|
message: string;
|
||
|
|
onConfirm: () => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
||
|
|
isOpen,
|
||
|
|
title,
|
||
|
|
message,
|
||
|
|
onConfirm,
|
||
|
|
onCancel,
|
||
|
|
}) => {
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 bg-[#001f3f]/90 backdrop-blur-sm flex items-center justify-center z-[100] p-6">
|
||
|
|
<div className="bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden">
|
||
|
|
<div className="p-8">
|
||
|
|
<h4 className="text-xl font-black text-[#002147] mb-4">{title}</h4>
|
||
|
|
<p className="text-slate-700 font-medium mb-6">{message}</p>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<button
|
||
|
|
onClick={onCancel}
|
||
|
|
className="bg-slate-100 text-slate-700 px-6 py-2 rounded-lg font-bold uppercase text-xs tracking-widest hover:bg-slate-200 transition-colors"
|
||
|
|
>
|
||
|
|
Cancelar
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={onConfirm}
|
||
|
|
className="bg-[#002147] text-white px-6 py-2 rounded-lg font-bold uppercase text-xs tracking-widest hover:bg-[#003366] transition-colors"
|
||
|
|
>
|
||
|
|
Confirmar
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ConfirmModal;
|
||
|
|
|
||
|
|
|