@smitch/fluid/lib/modal/Modal.js

A lightweight, Tailwind-powered React/Next.js UI component library.

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useEffect, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { CloseButton } from '..';
import { useDisableBack } from './hooks/useDisableBack';
var defaultStyles = 'dialog  border-none';
var themes = {
    light: 'backdrop:bg-white',
    dark: 'dark backdrop:bg-black',
};
var Modal = function (_a) {
    var src = _a.src, caption = _a.caption, alt = _a.alt, onClick = _a.onClick, open = _a.open, _b = _a.theme, theme = _b === void 0 ? 'dark' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
    useDisableBack();
    var dialogRef = useRef(null);
    var themeClasses = useMemo(function () { return themes[theme]; }, [theme]);
    useEffect(function () {
        if (dialogRef.current) {
            var modal = dialogRef.current;
            if (open) {
                modal.showModal();
                document.body.style.overflowY = 'hidden';
            }
            else {
                modal.close();
                document.body.style.overflowY = 'auto';
            }
        }
    }, [open, dialogRef]);
    return (_jsxs("dialog", { className: twMerge("dialog group border-none ".concat(themeClasses), className), ref: dialogRef, children: [_jsxs("figure", { children: [_jsx("img", { src: src, onClick: onClick, alt: alt, className: 'cursor-zoom-out' }), _jsx("figcaption", { className: 'text-center p-2 bg-light dark:bg-dark dark:text-light', children: caption })] }), _jsx(CloseButton, { onClick: onClick, layout: 'circle', size: 'lg', className: 'right-3 top-3' })] }));
};
export default Modal;
//# sourceMappingURL=Modal.js.map