many new

src/ui/Modal/Modal.sass

@@ -0,0 +1,38 @@
+.Modal__Overlay
+  display: flex
+  align-items: center
+  justify-content: center
+  position: fixed
+  top: 0
+  right: 0
+  left: 0
+  bottom: 0
+  background-color: #0f0f0fe9
+  z-index: 9999
+  opacity: 1
+  overflow: hidden
+
+  .Modal
+    background-color: var(--main-bg-color)
+    padding: .5rem
+
+    .Modal__Header
+      display: flex
+      justify-content: space-between
+      align-items: center
+      font-size: 1.4rem
+      font-weight: 700
+      margin-bottom: .5rem
+
+    .Modal__CloseButton
+      background: none
+      font-size: 2rem
+      padding: 0
+      height: 2.5rem
+      width: 2.5rem
+      border: none
+      color: var(--main-color)
+      cursor: pointer
+
+      &:hover
+        color: var(--link-color)

src/ui/Modal/Modal.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import './Modal.sass'
+import {connect} from "react-redux";
+import {setModal} from "../../store/actions";
+
+type Props = {
+    setModal: (modal: React.ReactNode | null) => void
+    children: any
+    className?: string
+    title?: string
+}
+
+class Modal extends React.Component<Props> {
+    private modal: HTMLDivElement | null | undefined;
+
+    componentDidMount() {
+        window.addEventListener('keyup', this.handleKeyUp, false);
+        document.addEventListener('mousedown', this.handleOutsideClick, false);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('keyup', this.handleKeyUp, false);
+        document.removeEventListener('mousedown', this.handleOutsideClick, false);
+    }
+
+    handleKeyUp = (e: KeyboardEvent) => {
+        if(e.code === 'Escape') {
+            const { setModal } = this.props;
+            e.preventDefault();
+            setModal(null);
+        }
+    };
+
+    handleOutsideClick = (e: any) => {
+        if(this.modal && !this.modal.contains(e.target)) {
+            const { setModal } = this.props;
+            setModal(null);
+        }
+    };
+
+    render() {
+        const { setModal, children, title } = this.props;
+
+        return (
+            <div className="Modal__Overlay">
+                <div className={"Modal"} ref={node => (this.modal = node)}>
+                    <div className={this.props.className}>
+                        <div className="Modal__Header">
+                            {title && title}
+                            <button className={"Modal__CloseButton"} onClick={() => setModal(null)}>X</button>
+                        </div>
+                        {children}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default connect(null,
+    dispatch => ({
+        setModal: (modal: React.ReactNode | null) => {
+            dispatch(setModal(modal))
+        }
+    })
+)(Modal);