72 lines
2.1 KiB
React
72 lines
2.1 KiB
React
import React from 'react';
|
|
import { X, AlertTriangle, Trash2, ShieldAlert } from 'lucide-react';
|
|
|
|
export default function ModalConfirm({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title = 'Confirmar Ação',
|
|
message,
|
|
description,
|
|
confirmText = 'Confirmar',
|
|
cancelText = 'Cancelar',
|
|
type = 'warning', // 'warning' | 'danger'
|
|
icon: CustomIcon
|
|
}) {
|
|
if (!isOpen) return null;
|
|
|
|
const isDanger = type === 'danger';
|
|
const IconComponent = CustomIcon || (isDanger ? Trash2 : AlertTriangle);
|
|
|
|
return (
|
|
<div className="modal-backdrop" onClick={onClose}>
|
|
<div
|
|
className="modal-dialog modal-confirm-dialog"
|
|
onClick={(e) => e.stopPropagation()}
|
|
style={{ maxWidth: '460px' }}
|
|
>
|
|
<div className="modal-header">
|
|
<div className="modal-title-box">
|
|
<div className={`modal-confirm-icon-box ${isDanger ? 'icon-box-danger' : 'icon-box-warning'}`}>
|
|
<IconComponent size={20} />
|
|
</div>
|
|
<h3 className="modal-title">{title}</h3>
|
|
</div>
|
|
<button type="button" className="modal-close-btn" onClick={onClose} title="Fechar">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="modal-body" style={{ padding: '1.5rem' }}>
|
|
<p className="modal-confirm-message">{message}</p>
|
|
{description && (
|
|
<p className="modal-confirm-desc">{description}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="modal-footer" style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.75rem' }}>
|
|
<button
|
|
type="button"
|
|
className="btn-modal-cancel"
|
|
onClick={onClose}
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className={`btn-modal-action-confirm ${isDanger ? 'btn-confirm-danger' : 'btn-confirm-warning'}`}
|
|
onClick={() => {
|
|
onConfirm();
|
|
onClose();
|
|
}}
|
|
>
|
|
<IconComponent size={16} />
|
|
<span>{confirmText}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|