@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
32 lines (31 loc) • 1.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Modal as FlowbiteModal } from 'flowbite-react';
import { cn } from '../../helpers';
import Button from './Button';
/**
* Reusable Modal component that wraps Flowbite's Modal with Pagamio styling and structure
*
* @example
* ```tsx
* <Modal
* isOpen={isOpen}
* onClose={handleClose}
* title="Confirmation"
* primaryButton={{
* label: "Confirm",
* onClick: handleConfirm,
* }}
* secondaryButton={{
* label: "Cancel",
* onClick: handleClose,
* variant: "outline-primary"
* }}
* >
* <p>Are you sure you want to perform this action?</p>
* </Modal>
* ```
*/
const Modal = ({ title, children, isOpen, onClose, size = 'md', primaryButton, secondaryButton, headerContent, footerContent, className, ...rest }) => {
return (_jsxs(FlowbiteModal, { show: isOpen, onClose: onClose, size: size, className: cn('max-h-[90vh] mt-16 md:mt-0 md:max-h-full', className), ...rest, children: [(title ?? headerContent) && _jsx(FlowbiteModal.Header, { children: headerContent ?? title }), _jsx(FlowbiteModal.Body, { children: _jsx("div", { className: "space-y-4", children: children }) }), (primaryButton || secondaryButton || footerContent) && (_jsx(FlowbiteModal.Footer, { children: footerContent ?? (_jsxs("div", { className: "flex w-full justify-end gap-2", children: [secondaryButton && (_jsx(Button, { onClick: secondaryButton.onClick, variant: secondaryButton.variant ?? 'outline-primary', disabled: secondaryButton.loading ?? secondaryButton.disabled, className: secondaryButton.variant, children: secondaryButton.label })), primaryButton && (_jsx(Button, { onClick: primaryButton.onClick, variant: primaryButton.variant ?? 'primary', disabled: primaryButton.loading ?? primaryButton.disabled, className: primaryButton.variant, children: primaryButton.label }))] })) }))] }));
};
export default Modal;