hiuphub-gamified/src/components/Common/modal.js

app of gamified

import React from "react";
import Modal from "react-modal";
import PropTypes from "prop-types";

const customStyles = {
  content: {
    top: "0",
    left: "55%",
    right: "0",
    bottom: "0",
    marginRight: "0",
    borderRadius: "0",
  },
};

export default function ReactModal(props) {
  return (
    <Modal
      isOpen={props.isOpen}
      onRequestClose={props.onRequestClose}
      style={{ ...customStyles, ...props.styles }}
      contentLabel="Example Modal"
    >
      <div className="gamification  h-100">
        <div className="modal-dialog  h-100">
          <div className="modal-content  h-100">
            <div className="modal-header">
              <span></span>
              <button
                type="button"
                className="btn btn-close"
                onClick={props.onRequestClose}
              />
            </div>
            <div className="modal-body py-4 h-100">{props.children}</div>
          </div>
        </div>
      </div>
    </Modal>
  );
}

ReactModal.propTypes = {
  styles: PropTypes.object,
  isOpen: PropTypes.bool.isRequired,
  onRequestClose: PropTypes.func.isRequired,
};

ReactModal.defaultProps = {
  styles: {},
};