28 lines
790 B
TypeScript
28 lines
790 B
TypeScript
import { useModalStore } from "@/stores/useModalStore";
|
|
import { useEffect } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
export function ModalContainer() {
|
|
const { modal, setModal } = useModalStore();
|
|
|
|
useEffect(() => {
|
|
const listener = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setModal(null);
|
|
};
|
|
document.addEventListener("keydown", listener);
|
|
|
|
return () => {
|
|
document.removeEventListener("keydown", listener);
|
|
};
|
|
}, [setModal]);
|
|
|
|
const jsx = modal ? (
|
|
<div className="fixed inset-0 z-[20] flex justify-center items-start transition-opacity">
|
|
<div className="absolute [backdrop-filter:blur(16px)] bg-[#0F101199] w-full h-full z-[1]" />
|
|
{modal}
|
|
</div>
|
|
) : null;
|
|
|
|
return createPortal(jsx, document.body);
|
|
}
|