51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { cn } from "@/utils/class-merge";
|
|
import { FunctionComponent } from "preact";
|
|
import { Dispatch, StateUpdater, useEffect } from "preact/hooks";
|
|
|
|
interface ModalWindowProps {
|
|
isOpen?: boolean;
|
|
setIsOpen?: Dispatch<StateUpdater<boolean>>;
|
|
onClose?: () => void;
|
|
className?: string;
|
|
zIndex?: number;
|
|
}
|
|
const ModalWindow: FunctionComponent<ModalWindowProps> = ({
|
|
isOpen,
|
|
children,
|
|
setIsOpen,
|
|
onClose,
|
|
className = "",
|
|
zIndex,
|
|
}) => {
|
|
useEffect(() => {
|
|
if (isOpen) return;
|
|
if (onClose) onClose();
|
|
}, [isOpen]);
|
|
return (
|
|
isOpen && (
|
|
<div
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (setIsOpen) setIsOpen(false);
|
|
}}
|
|
class={cn(
|
|
"fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50"
|
|
)}
|
|
style={{ zIndex: zIndex }}
|
|
>
|
|
<div
|
|
class={cn(
|
|
"flex h-[40rem] w-[95%] cursor-auto flex-col items-center justify-start rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16",
|
|
className
|
|
)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default ModalWindow;
|