@ducor/react
Version:
admin template ui interface
42 lines (41 loc) • 2.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Modal = function (_a) {
var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.closeBtn, closeBtn = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, children = _a.children;
if (!isOpen)
return null;
var 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", // Ensure it takes full screen
};
return (_jsxs("div", { className: 'fixed inset-0 flex items-center justify-center z-50 overflow-hidden', children: [_jsx("div", { className: 'fixed inset-0 bg-black opacity-30', onClick: onClose }), _jsxs("div", { className: "relative bg-white rounded-2xl shadow-xl mx-4 ".concat(sizes[size]), children: [closeBtn && (_jsx("button", { className: 'absolute top-4 right-3 text-gray-700 cursor-pointer', onClick: onClose, children: "\u2715" })), children] })] }));
};
var ModalHeader = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx("div", { className: "border-b border-gray-300 px-4 py-3 ".concat(className), children: children }));
};
var ModalTitle = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx("h3", { className: " text-gray-800 text-xl font-semibold ".concat(className), children: children }));
};
var ModalSubTitle = function (_a) {
var children = _a.children, className = _a.className;
return children ? _jsx("p", { className: "text-gray-500 ".concat(className), children: children }) : null;
};
var ModalBody = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx("div", { className: "p-4 ".concat(className), children: children }));
};
var ModalFooter = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx("div", { className: "border-t border-gray-300 p-3 flex justify-end space-x-2 py-2 ".concat(className), children: children }));
};
Modal.Header = ModalHeader;
Modal.Title = ModalTitle;
Modal.SubTitle = ModalSubTitle;
Modal.Body = ModalBody;
Modal.Footer = ModalFooter;
export default Modal;