import React, { useState } from 'react'; function Modal({ open, title, onClose, children }) { if (!open) return null; return ( <div role='dialog' aria-modal='true' aria-label={title} onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', display: 'grid', placeItems: 'center', padding: 16 }} > <div style={{ width: 'min(92%, 420px)', borderRadius: 16, background: '#fff', padding: 16 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <strong>{title}</strong> <button type='button' onClick={onClose} style={{ border: 0, background: 'transparent', fontSize: 18 }}> × </button> </div> <div style={{ marginTop: 12 }}>{children}</div> </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 modal </button> <Modal open={open} title='meetcode' onClose={() => setOpen(false)}> <p style={{ margin: 0 }}>Practice a little every day.</p> </Modal> </div> ); }