diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx new file mode 100644 index 0000000..6a54cef --- /dev/null +++ b/frontend/src/components/Modal.tsx @@ -0,0 +1,72 @@ +import { useEffect } from 'react' + +interface ModalProps { + title: string + onClose: () => void + children: React.ReactNode + width?: number +} + +export default function Modal({ title, onClose, children, width = 480 }: ModalProps) { + useEffect(() => { + function onKey(e: KeyboardEvent) { + if (e.key === 'Escape') onClose() + } + window.addEventListener('keydown', onKey) + return () => window.removeEventListener('keydown', onKey) + }, [onClose]) + + return ( +
+
e.stopPropagation()} + className="glass" + style={{ + width: '100%', + maxWidth: width, + borderRadius: 12, + padding: 20, + display: 'flex', + flexDirection: 'column', + gap: 16, + maxHeight: '90dvh', + overflowY: 'auto', + }} + > +
+

+ {title} +

+ +
+ {children} +
+
+ ) +}