start

src/components/shared/modal.js

@@ -0,0 +1,67 @@
+import {Fragment} from 'react';
+import PropTypes from 'prop-types';
+
+function Modal(props) {
+  if (!props.showModal) return null;
+
+  return (
+    <Fragment>
+      <div
+        className={
+          'justify-center items-center flex overflow-x-hidden overflow-y-auto fixed \
+            inset-0 z-50 outline-none focus:outline-none'
+        }
+      >
+        <div className='relative w-auto my-6 mx-auto w-4/5 max-w-6xl'>
+          <div
+            className={
+              'border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white \
+                outline-none focus:outline-none'
+            }
+          >
+            <button
+              className={
+                'absolute top-0 left-0 z-10 p-1 mr-auto bg-transparent border-0 text-black opacity-50 float-left \
+                  text-3xl leading-none font-semibold outline-none focus:outline-none'
+              }
+              type='button'
+              onClick={props.onClose}
+            >
+              <span
+                className={
+                  'bg-transparent text-black opacity-50 h-6 w-6 text-2xl block outline-none focus:outline-none'
+                }
+              >
+                ×
+              </span>
+            </button>
+            {props.header && (
+              <div className='flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t'>
+                <p className='text-2xl font-medium'>{props.header}</p>
+              </div>
+            )}
+            <div className='relative p-6 flex-auto'>
+              <p className='my-4 text-blueGray-500 text-lg leading-relaxed'>
+                {props.body}
+              </p>
+            </div>
+            <div className='flex items-center justify-end p-4 border-t border-solid border-blueGray-200 rounded-b'>
+              {props.footer}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='opacity-75 fixed inset-0 z-40 bg-black'/>
+    </Fragment>
+  );
+}
+
+Modal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  header: PropTypes.node,
+  body: PropTypes.node.isRequired,
+  footer: PropTypes.node.isRequired
+};
+
+export default Modal;