70 lines
1.7 KiB
JavaScript
70 lines
1.7 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { Modal, Button } from 'react-bootstrap';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import {
|
|
faCircleCheck,
|
|
faCircleXmark,
|
|
faCircleExclamation,
|
|
faCircleInfo
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
|
|
const iconMap = {
|
|
success: faCircleCheck,
|
|
danger: faCircleXmark,
|
|
warning: faCircleExclamation,
|
|
info: faCircleInfo
|
|
};
|
|
|
|
const NotificationModal = ({
|
|
show,
|
|
onClose,
|
|
title,
|
|
message,
|
|
variant = "info",
|
|
buttons = [{ label: "Aceptar", variant: "primary", onClick: onClose }]
|
|
}) => {
|
|
return (
|
|
<Modal show={show} onHide={onClose} centered>
|
|
<Modal.Header closeButton className={`bg-${variant} ${variant === 'info' ? 'text-dark' : 'text-white'}`}>
|
|
<Modal.Title>
|
|
<FontAwesomeIcon icon={iconMap[variant] || faCircleInfo} className="me-2" />
|
|
{title}
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
<p className="mb-0">{message}</p>
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
|
{buttons.map((btn, index) => (
|
|
<Button
|
|
key={index}
|
|
variant={btn.variant || "primary"}
|
|
onClick={btn.onClick || onClose}
|
|
>
|
|
{btn.label}
|
|
</Button>
|
|
))}
|
|
</Modal.Footer>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
NotificationModal.propTypes = {
|
|
show: PropTypes.bool.isRequired,
|
|
onClose: PropTypes.func.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
message: PropTypes.string.isRequired,
|
|
variant: PropTypes.oneOf(['success', 'danger', 'warning', 'info']),
|
|
buttons: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
label: PropTypes.string.isRequired,
|
|
variant: PropTypes.string,
|
|
onClick: PropTypes.func
|
|
})
|
|
)
|
|
};
|
|
|
|
export default NotificationModal;
|