1 files changed, 66 insertions, 0 deletions
diff --git a/apps/web-shared/src/components/modal.svelte b/apps/web-shared/src/components/modal.svelte
new file mode 100644
index 0000000..f3b633c
--- /dev/null
+++ b/apps/web-shared/src/components/modal.svelte
@@ -0,0 +1,66 @@
+<script>
+	import {random_string} from "$shared/lib/helpers";
+
+	export let title = "";
+	let isVisible = false;
+	const modal_id = "modal_" + random_string(5);
+
+	function handle_keyup(e) {
+		if (e.key === "Escape") {
+			isVisible = false;
+		}
+	}
+
+	export const functions = {
+		open() {
+			isVisible = true;
+			window.addEventListener("keyup", handle_keyup);
+		},
+		close() {
+			isVisible = false;
+			window.removeEventListener("keyup", handle_keyup);
+		},
+	};
+</script>
+
+<div class="modal modal--animate-scale flex flex-center padding-md bg-dark bg-opacity-40% {isVisible ? 'modal--is-visible' : ''}"
+     id={modal_id}
+>
+    <div class="modal__content width-100% max-width-xs max-height-100% overflow-auto radius-md shadow-md bg"
+         role="alertdialog"
+    >
+        <header class="padding-y-sm padding-x-md flex items-center justify-between"
+        >
+            <h4 class="text-truncate">{title}</h4>
+
+            <button class="reset modal__close-btn modal__close-btn--inner"
+                    on:click={functions.close}
+            >
+                <svg class="icon"
+                     viewBox="0 0 20 20">
+                    <title>Close modal window</title>
+                    <g fill="none"
+                       stroke="currentColor"
+                       stroke-miterlimit="10"
+                       stroke-width="2"
+                       stroke-linecap="round"
+                       stroke-linejoin="round"
+                    >
+                        <line x1="3"
+                              y1="3"
+                              x2="17"
+                              y2="17"/>
+                        <line x1="17"
+                              y1="3"
+                              x2="3"
+                              y2="17"/>
+                    </g>
+                </svg>
+            </button>
+        </header>
+
+        <div class="padding-bottom-md padding-x-md">
+            <slot/>
+        </div>
+    </div>
+</div>