45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useEffect } from "react";
|
|
import useModalStore from "../stores/useModalStore";
|
|
import "./ModalContainer.css";
|
|
|
|
interface ModalContainerProps {
|
|
className?: string;
|
|
}
|
|
|
|
function ModalContainer({ className }: ModalContainerProps) {
|
|
const [modal, setModal] = useModalStore((state) => [
|
|
state.modal,
|
|
state.setModal,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
if (e.code === "Escape") {
|
|
setModal(null);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, []);
|
|
|
|
if (modal) {
|
|
return (
|
|
<div
|
|
onClick={() => setModal(null)}
|
|
className={[
|
|
"absolute w-full min-h-screen top-0 left-0 flex flex-col justify-center items-center p-8 bg-black bg-opacity-75 transition-opacity cursor-pointer z-10",
|
|
className,
|
|
].join(" ")}
|
|
>
|
|
<div onClick={(e) => e.stopPropagation()} className="cursor-default">
|
|
{modal}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ModalContainer;
|