import React, { useEffect, useState } from 'react'; function Overlay({ open, onClose }) { useEffect(() => { if (!open) return; function onKey(e) { if (e.key === 'Escape') onClose(); } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; return ( <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', display: 'grid', placeItems: 'center', padding: 16 }}> <div style={{ width: 'min(92%, 420px)', background: '#fff', borderRadius: 16, padding: 16 }}> <strong>meetcode overlay</strong> <div style={{ marginTop: 10, color: '#555' }}>Press Escape to close.</div> <button type='button' onClick={onClose} style={{ marginTop: 12, padding: '8px 12px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Close</button> </div> </div> ); } export default function App() { const [open, setOpen] = useState(false); return ( <div style={{ padding: 16 }}> <button type='button' onClick={() => setOpen(true)} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Open</button> <Overlay open={open} onClose={() => setOpen(false)} /> </div> ); }