{"size": 886, "ext": "js", "max_stars_repo_path": "src/common/Popup.js", "max_stars_repo_name": "globalwetlands/glowdex-app", "max_stars_repo_stars_event_min_datetime": "2021-08-10T22:46:39.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-10T22:46:39.000Z", "max_issues_repo_path": "src/common/Popup.js", "max_issues_repo_name": "globalwetlands/glowdex-app", "max_issues_repo_issues_event_min_datetime": "2021-08-09T06:47:49.000Z", "max_issues_repo_issues_event_max_datetime": "2021-10-05T04:31:29.000Z", "max_forks_repo_path": "src/common/Popup.js", "max_forks_repo_name": "globalwetlands/glowdex-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 26.0588235294, "max_line_length": 100, "alphanum_fraction": 0.644469526}
import './Popup.css'

import { X as CloseIcon } from 'react-feather'
import Modal from 'react-modal'

import { IconButton } from './IconButton'

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement(`body`)

export function Popup({ title, modalIsOpen, closeModal, children }) {
  function afterOpenModal() {}

  return (
    <Modal
      isOpen={modalIsOpen}
      onAfterOpen={afterOpenModal}
      onRequestClose={closeModal}
      className="Popup--Modal"
      overlayClassName="Popup--Overlay"
    >
      <div className="Popup--Modal--Inner">
        {title && <h3 className="Popup--Title">{title}</h3>}
        <div className="Popup--Content">{children}</div>
      </div>
      <IconButton
        Icon={CloseIcon}
        className="Popup--CloseButton"
        onClick={closeModal}
      />
    </Modal>
  )
}
