Add settings panel

packages/web/src/components/Modal.tsx

@@ -0,0 +1,71 @@
+import styled from "@emotion/styled"
+import { useCallback } from "react"
+
+const ModalBackground = styled.div`
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(1px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+`
+const ModalBackground2 = styled.div`
+  z-index: 2;
+  width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+`
+const ModalContainer = styled.div`
+  background: var(--page-background);
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+  border-radius: 5px;
+  max-width: 500px;
+  margin: 0 auto;
+`
+const ModalTitle = styled.div`
+  border-bottom: 1px solid var(--border-color);
+  padding: 10px 20px;
+  font-weight: 600;
+  text-align: center;
+`
+const ModalContent = styled.div`
+  padding: 15px 20px;
+`
+
+export const Modal: React.FC<{
+  show: boolean
+  title: string
+  onClose(): void
+}> = ({ show, children, title, onClose }) => {
+  const onBackgroundClick = useCallback(
+    e => {
+      if (e.currentTarget === e.target) {
+        e.stopPropagation()
+        onClose()
+      }
+    },
+    [onClose]
+  )
+
+  if (!show) {
+    return null
+  }
+
+  return (
+    <>
+      <ModalBackground />
+      <ModalBackground2 onClick={onBackgroundClick}>
+        <ModalContainer>
+          <ModalTitle>{title}</ModalTitle>
+          <ModalContent>{children}</ModalContent>
+        </ModalContainer>
+      </ModalBackground2>
+    </>
+  )
+}