From 1ce667c981c84078388ac6b854201c07e61c1190 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Sun, 4 Dec 2022 23:50:14 +0100
Subject: [PATCH] feat: add modal component

---
 frontend/src/lib/components/Modal.svelte | 49 ++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 frontend/src/lib/components/Modal.svelte

diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..e9e90a1
--- /dev/null
+++ b/frontend/src/lib/components/Modal.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	const close = () => dispatch('close');
+
+	let modal: HTMLElement;
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape') {
+			close();
+			return;
+		}
+	};
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<div class="modalBackground" on:keydown on:click={close} />
+
+<div class="modal" role="dialog" aria-modal="true" bind:this={modal}>
+	<slot name="header" />
+	<hr />
+	<slot />
+</div>
+
+<style>
+	.modalBackground {
+		@apply fixed;
+		@apply top-0 left-0;
+		@apply h-full w-full;
+		background: rgba(0, 0, 0, 0.3);
+
+		@apply z-20;
+	}
+
+	.modal {
+		@apply absolute;
+		@apply left-1/2 top-1/2;
+		@apply w-[calc(100vw - 4em)]
+        @apply p-4;
+		@apply rounded-md;
+		@apply transform:
+		translate(-50%, -50%) overflow-auto;
+		@apply bg-white;
+
+		@apply z-50;
+	}
+</style>