text: import { useEffect } from 'react';
  import { createPortal } from 'react-dom';
  import s from './Modal.module.css';
  import PropTypes from 'prop-types';
  
  const modalRoot = document.querySelector('#modal-root');
  
  export default function Modal({ onClose, children }) {
    useEffect(() => {
      const handleKeyDown = e => {
        if (e.code === 'Escape') {
          onClose();
        }
      };
      window.addEventListener('keydown', handleKeyDown);
      return () => {
        window.removeEventListener('keydown', handleKeyDown);
      };
    }, [onClose]);
  
    const handleBackdropClick = e => {
      if (e.currentTarget === e.target) {
        onClose();
      }
    };
  
    return createPortal(
      <div className={s.Overlay} onClick={handleBackdropClick}>
        <div className={s.Modal}>{children}</div>
      </div>,
      modalRoot,
    );
  }
  
  Modal.propTypes = {
    // Все, что может быть отрендерено:
    // числа, строки, элементы или массивы
    // (или фрагменты) содержащие эти типы
    children: PropTypes.node.isRequired,
    onClose: PropTypes.func.isRequired,
  };
  