File size: 767 Bytes
1c0c94d | 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 | import { useEffect } from 'react'
export default function Modal({ title, icon, onClose, children }) {
useEffect(() => {
const onKey = (e) => e.key === 'Escape' && onClose()
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
}, [onClose])
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-head">
{icon && <span style={{ fontSize: 24 }}>{icon}</span>}
<b>{title}</b>
<button className="x" onClick={onClose} aria-label="close">
×
</button>
</div>
<div className="modal-body">{children}</div>
</div>
</div>
)
}
|