React Components - Modal

gistfile1.txt

import { useEffect } from 'react';
import { BsXLg } from "react-icons/bs";
import { Button } from 'antd'

const Modal = ({ 
  children, 
  setVisible, 
  handleSubmit,
  visible=false, 
  title="Title",
  showHeader=true 
}) => {

  const handleCancel = () => {
    setVisible(false);
  }

  const onSubmit = () => {
    handleSubmit()
    handleCancel()
  }
  
  return (
    <>
    {
      visible && (
        <div className="modal">
          <div className="modal_overlay" onClick={handleCancel}/>
          <div className="modal_main">
            {
              showHeader && 
              <div className="modal_header">
                <h3>{title}</h3>
              </div>
            }
            <div className="modal_btn-close" onClick={handleCancel}>
              <BsXLg className="modal_icon"/>
            </div>
            <div className="modal_content">
              { children }
            </div>
            <div className="modal_footer">
              <Button type="danger" onClick={handleCancel}>Cancel</Button>
              <Button type="primary" onClick={onSubmit}>Submit</Button>
            </div>
          </div>
        </div>
      )
    }
      
    </>
  )
}

export default Modal