@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
41 lines (40 loc) • 2.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Modal } from 'flowbite-react';
import { HiCheckCircle, HiExclamationCircle, HiInformationCircle, HiXCircle } from 'react-icons/hi';
import Button from './Button';
const variantConfig = {
success: {
icon: HiCheckCircle,
iconColor: 'text-green-500',
buttonVariant: 'primary',
},
error: {
icon: HiXCircle,
iconColor: 'text-red-500',
buttonVariant: 'primary',
},
warning: {
icon: HiExclamationCircle,
iconColor: 'text-yellow-500',
buttonVariant: 'primary',
},
info: {
icon: HiInformationCircle,
iconColor: 'text-blue-500',
buttonVariant: 'primary',
},
};
const NotificationModal = ({ show, onClose, onConfirm, title, message, variant = 'info', confirmText = 'OK', cancelText = 'Cancel', showConfirmButton = true, showCancelButton = false, loading = false, size = 'md', children, }) => {
const config = variantConfig[variant];
const IconComponent = config.icon;
const handleConfirm = () => {
if (onConfirm) {
onConfirm();
}
else {
onClose();
}
};
return (_jsxs(Modal, { show: show, size: size, popup: true, onClose: onClose, children: [_jsx(Modal.Header, { className: "border-b-0 pb-0" }), _jsxs(Modal.Body, { className: "text-center", children: [_jsx("div", { className: `mx-auto mb-4 h-14 w-14 ${config.iconColor}`, children: _jsx(IconComponent, { className: "h-full w-full" }) }), title && _jsx("h3", { className: "mb-3 text-xl font-semibold text-gray-900 dark:text-white", children: title }), _jsx("p", { className: "mb-5 text-lg font-normal text-gray-500 dark:text-gray-400", children: message }), children, !children && (showConfirmButton || showCancelButton) && (_jsxs("div", { className: "flex justify-center gap-4", children: [showConfirmButton && (_jsx(Button, { variant: config.buttonVariant, onClick: handleConfirm, disabled: loading, children: confirmText })), showCancelButton && (_jsx(Button, { variant: "outline", onClick: onClose, disabled: loading, children: cancelText }))] }))] })] }));
};
export default NotificationModal;