qmining-page/src/components/modal.js

import React, { useEffect } from 'react'

import styles from './modal.module.css'

export default function Modal(props) {
  const { closeClick } = props

  const keyHandler = (event) => {
    if (event.key === 'Escape' && closeClick) {
      closeClick()
    }
  }

  useEffect(() => {
    document.addEventListener('keydown', keyHandler)
    return () => {
      document.removeEventListener('keydown', keyHandler)
    }
  }, [])

  return (
    <div
      style={{
        cursor: closeClick ? 'pointer' : 'auto',
      }}
      onClick={() => {
        if (closeClick) {
          closeClick()
        }
      }}
      className={styles.modal}
    >
      <div
        onClick={(event) => {
          event.stopPropagation()
        }}
        className={styles.modalContent}
      >
        {props.children}
      </div>
    </div>
  )
}