@smitch/fluid
Version:
A Next/React ui-component libray.
33 lines (32 loc) • 1.65 kB
JavaScript
'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;