From aeafde49cfee189b1e5b45b95bf4de657d1f0831 Mon Sep 17 00:00:00 2001
From: Remy van der Wereld <r.van.der.wereld@amsterdam.nl>
Date: Mon, 5 Aug 2024 13:02:32 +0200
Subject: [PATCH] Added Modal component

---
 src/app/components/Modal/Modal.tsx | 77 ++++++++++++++++++++++++++++++
 src/app/components/index.ts        |  1 +
 2 files changed, 78 insertions(+)
 create mode 100644 src/app/components/Modal/Modal.tsx

diff --git a/src/app/components/Modal/Modal.tsx b/src/app/components/Modal/Modal.tsx
new file mode 100644
index 0000000..6df4f3b
--- /dev/null
+++ b/src/app/components/Modal/Modal.tsx
@@ -0,0 +1,77 @@
+import { ReactNode } from "react"
+import styled from "styled-components"
+import { Icon } from "@amsterdam/design-system-react"
+import { CloseIcon } from "@amsterdam/design-system-react-icons"
+
+type Props = {
+  title?: string
+  open?: boolean
+  onOk?: () => void
+  onCancel?: () => void
+  children?: ReactNode
+}
+
+const Wrapper = styled.div`
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
+`
+
+const Container = styled.div`
+  background-color: white;
+  margin: 25% auto; /* 15% from the top and centered */
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+  max-width: 500px;
+  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+`
+
+const Heading = styled.div`
+  padding: 0 20px;
+`
+
+const StyledIcon = styled(Icon)`
+  float: right;
+  cursor: pointer;
+  &:hover,
+  &:focus {
+    opacity: 0.5;
+    text-decoration: none;
+  }
+`
+
+const Content = styled.div`
+  border-top: 1px solid #e0e0e0;
+  padding: 20px;
+`
+
+export const Modal: React.FC<Props> = ({ title, open = true, onCancel, children }) => open ? (
+  <Wrapper onClick={ onCancel }>
+    <Container
+      onClick={(e) => {
+      // do not close modal if anything inside modal content is clicked
+        e.stopPropagation()
+      }}
+    >
+      <Heading>
+        <StyledIcon
+          size="level-5"
+          svg={ CloseIcon }
+          onClick={ onCancel }
+        />
+        <h2>{ title }</h2>
+      </Heading>
+      <Content>
+        { children }
+      </Content>
+    </Container>
+  </Wrapper>
+) : null
+
+export default Modal
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index e7f0186..526727d 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./DefaultLayout/DefaultLayout"
+export * from "./Modal/Modal"
 export * from "./NavMenu/NavMenu"
 export * from "./PageHeading/PageHeading"
 export * from "./RouterLink/RouterLink"