import { useEffect, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { X } from "lucide-react"; // Small centered modal shell (portaled to ): backdrop + ESC + scroll-lock close. export default function Modal({ title, onClose, children, maxWidth = "max-w-lg", }: { title: ReactNode; onClose: () => void; children: ReactNode; maxWidth?: string; }) { useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [onClose]); return createPortal( , document.body ); }