File size: 1,669 Bytes
6a7089a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import { useEffect } from "react";
import Button from "./Button";
interface Props {
open: boolean;
onClose: () => void;
title: string;
children: React.ReactNode;
actions?: React.ReactNode;
wide?: boolean;
}
export default function Modal({
open,
onClose,
title,
children,
actions,
wide,
}: Props) {
useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
};
if (open) {
document.addEventListener("keydown", handleEsc);
document.body.style.overflow = "hidden";
}
return () => {
document.removeEventListener("keydown", handleEsc);
document.body.style.overflow = "";
};
}, [open, onClose]);
if (!open) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
onClick={onClose}
>
<div
className={`dashboard-panel max-h-[90vh] overflow-y-auto p-5 ${
wide ? "w-full max-w-lg" : "w-full max-w-sm"
}`}
onClick={(e) => e.stopPropagation()}
>
<div className="mb-4 border-b border-border-subtle pb-4">
<div className="dashboard-section-label mb-2">Dashboard</div>
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
</div>
<div className="text-sm text-text-secondary">{children}</div>
<div className="mt-5 flex justify-end gap-2 border-t border-border-subtle pt-4">
{actions ?? (
<Button variant="secondary" onClick={onClose}>
Close
</Button>
)}
</div>
</div>
</div>
);
}
|