34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, type ReactNode } from 'react';
|
||
|
||
// v0.71.0 — reusable modal dialog: fixed overlay (z-index 60, above the z-50 toast stack),
|
||
// centered panel, closes on Escape and backdrop click (inner-panel clicks do not close it).
|
||
// Foundation for future modal-based features; keep this generic.
|
||
export default function Modal({ open, onClose, title, children }: { open: boolean; onClose: () => void; title: string; children: ReactNode }) {
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') onClose();
|
||
};
|
||
window.addEventListener('keydown', onKey);
|
||
return () => window.removeEventListener('keydown', onKey);
|
||
}, [open, onClose]);
|
||
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div className="modal-panel" role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
|
||
<header className="modal-header">
|
||
<h2>{title}</h2>
|
||
<button type="button" data-testid="modal-close" className="pane-btn" onClick={onClose} aria-label="Close dialog">
|
||
×
|
||
</button>
|
||
</header>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|