seti-ramesesv1/dist/components/ui/Modal.js

Reusable components and context for Next.js apps

import { jsx, jsxs } from 'react/jsx-runtime';
import { clsx } from '../../node_modules/clsx/dist/clsx.js';
import { useEffect } from 'react';
import styles from '../../styles/Modal.module.css.js';

const Modal = ({ open, onClose, title, children, className, width }) => {
    useEffect(() => {
        const handleKey = (e) => {
            if (e.key === "Escape")
                onClose();
        };
        if (open)
            document.addEventListener("keydown", handleKey);
        return () => document.removeEventListener("keydown", handleKey);
    }, [open, onClose]);
    if (!open)
        return null;
    return (jsx("div", { className: styles.overlay, children: jsxs("div", { className: clsx(styles.modal, className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", style: { width: width }, children: [title && (jsx("h2", { id: "modal-title", className: styles.title, children: title })), children, jsx("button", { onClick: onClose, className: styles.closeButton, "aria-label": "Close modal", children: "\u2715" })] }) }));
};

export { Modal, Modal as default };
//# sourceMappingURL=Modal.js.map