@ducor/react
Version:
admin template ui interface
34 lines (33 loc) • 2.36 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Heading, Text } from "./typography";
// Modal Component
const Modal = ({ isOpen, onClose, closeBtn = true, size = "sm", children }) => {
if (!isOpen)
return null;
const sizes = {
sm: "max-w-sm min-w-[300px]",
md: "max-w-sm min-w-[300px] md:max-w-md md:min-w-[400px]",
lg: "max-w-sm min-w-[300px] lg:max-w-lg lg:min-w-[500px]",
xl: "max-w-sm min-w-[300px] lg:max-w-xl lg:min-w-[600px]",
"2xl": "max-w-sm min-w-[300px] lg:max-w-2xl lg:min-w-[700px]",
full: "w-full h-full min-w-full min-h-full",
};
return (_jsxs("div", { className: 'fixed inset-0 flex items-center justify-center z-50 overflow-hidden', children: [_jsx("div", { className: 'fixed inset-0 bg-gray-500 bg-opacity-75 opacity-50 transition-opacity dark:bg-black dark:bg-opacity-50', onClick: onClose }), _jsxs("div", { className: `relative flex flex-col justify-between bg-white dark:bg-gray-800 rounded-2xl shadow-xl mx-4 ${sizes[size]}`, children: [closeBtn && (_jsx("button", { className: 'absolute top-4 right-3 text-gray-700 dark:text-gray-300 cursor-pointer', onClick: onClose, children: "\u2715" })), children] })] }));
};
// Modal Header Component
const ModalHeader = ({ children, className = "", }) => (_jsx("div", { className: `flex-none border-b border-gray-200 dark:border-gray-600 dark:text-gray-50 px-4 py-3 ${className}`, children: children }));
// Modal Title Component
const ModalTitle = ({ children, className = "", }) => (_jsx(Heading, { as: 'h4', className: className, children: children }));
// Modal SubTitle Component
const ModalSubTitle = ({ children, className = "", }) => (children ? _jsx(Text, { className: className, children: children }) : null);
// Modal Body Component
const ModalBody = ({ children, className = "" }) => (_jsx("div", { className: `grow p-4 ${className}`, children: children }));
// Modal Footer Component
const ModalFooter = ({ children, className = "", }) => (_jsx("div", { className: `flex-none border-t border-gray-200 dark:border-gray-600 p-3 flex justify-end space-x-2 py-2 ${className}`, children: children }));
// Assigning Sub-Components
Modal.Header = ModalHeader;
Modal.Title = ModalTitle;
Modal.SubTitle = ModalSubTitle;
Modal.Body = ModalBody;
Modal.Footer = ModalFooter;
export default Modal;