1 files changed, 67 insertions, 0 deletions

diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx
new file mode 100644
index 000000000..0bb0aaa61
--- /dev/null
+++ b/src/components/ui/Modal/index.tsx
@@ -0,0 +1,67 @@
+import { Component, ReactChildren } from 'react';
+import ReactModal from 'react-modal';
+import classnames from 'classnames';
+import injectCSS from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+
+import { mdiClose } from '@mdi/js';
+import styles from './styles';
+
+type Props = {
+  children: ReactChildren;
+  className: string;
+  classes: any;
+  isOpen: boolean;
+  portal: string;
+  close: () => void;
+  shouldCloseOnOverlayClick: boolean;
+  showClose: boolean;
+};
+
+@injectCSS(styles)
+class Modal extends Component<Props> {
+  static defaultProps = {
+    className: null,
+    portal: 'modal-portal',
+    shouldCloseOnOverlayClick: false,
+    showClose: true,
+  };
+
+  render() {
+    const {
+      children,
+      className,
+      classes,
+      isOpen,
+      portal,
+      close,
+      shouldCloseOnOverlayClick,
+      showClose,
+    } = this.props;
+
+    return (
+      <ReactModal
+        isOpen={isOpen}
+        className={classnames({
+          [`${classes.modal}`]: true,
+          [`${className}`]: className,
+        })}
+        portalClassName={classes.component}
+        overlayClassName={classes.overlay}
+        portal={portal}
+        onRequestClose={close}
+        shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+        appElement={document.querySelector('#root')}
+      >
+        {showClose && close && (
+          <button type="button" className={classes.close} onClick={close}>
+            <Icon icon={mdiClose} size={1.5} />
+          </button>
+        )}
+        <div className={classes.content}>{children}</div>
+      </ReactModal>
+    );
+  }
+}
+
+export default Modal;