@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
34 lines • 2.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Modal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const Dialog_js_1 = require("../primitives/Dialog.js");
const react_dialog_1 = require("@radix-ui/react-dialog");
const index_js_1 = require("../primitives/index.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
const framer_motion_1 = require("framer-motion");
const Modal = ({ trigger, css, overlayZIndex = 9999, showCloseButton = true, children, ...props }) => {
return ((0, jsx_runtime_1.jsxs)(react_dialog_1.Root, { modal: true, ...props, children: [(0, jsx_runtime_1.jsx)(react_dialog_1.DialogTrigger, { asChild: true, children: trigger }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open ? ((0, jsx_runtime_1.jsx)(react_dialog_1.DialogPortal, { forceMount: true, children: (0, jsx_runtime_1.jsx)(Dialog_js_1.Overlay, { forceMount: true, css: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'blackA10'
}, style: { zIndex: overlayZIndex }, children: (0, jsx_runtime_1.jsxs)(Dialog_js_1.AnimatedContent, { forceMount: true, css: {
'--borderColor': 'colors.subtle-border-color',
border: '1px solid var(--borderColor)',
padding: '4',
...css
}, onPointerDownOutside: props.onPointerDownOutside, children: [showCloseButton ? ((0, jsx_runtime_1.jsx)(react_dialog_1.DialogClose, { asChild: true, style: {
position: 'absolute',
right: 10,
top: 12,
zIndex: 10
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "none", css: { color: 'gray9', p: '2' }, onClick: (e) => {
props.onCloseButtonClicked?.(e);
}, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faXmark_1.faXmark, width: 16, height: 16 }) }) })) : null, children] }) }) })) : null })] }));
};
exports.Modal = Modal;
//# sourceMappingURL=Modal.js.map