[overlay] add overlay

src/overlay/Overlay.jsx

@@ -0,0 +1,19 @@
+import style from './overlay.css';
+
+function preventPropagation (event) {
+    event.stopPropagation();
+}
+
+function Overlay ({onBackgroundClick}, children) {
+    return (
+        <div className={style.overlay} onclick={onBackgroundClick}>
+            <div className={style.contentWrapper} onclick={preventPropagation}>
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export {
+    Overlay
+}

src/overlay/overlay.css

@@ -0,0 +1,21 @@
+.overlay {
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.contentWrapper {
+    position: relative;
+    display: flex;
+    max-width: 80vw;
+    max-height: 80vh;
+    margin: auto;
+    padding: 1em;
+    color: initial;
+    background: #FFF;
+    box-shadow: 0 0 4px #666;
+}