Initial commit

frontend-internal/src/lib/components/Modal.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  
+  export let open = false;
+  export let title = '';
+  
+  const dispatch = createEventDispatcher();
+  
+  function close() {
+    dispatch('close');
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Escape' && open) {
+      close();
+    }
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown}/>
+
+{#if open}
+  <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+      
+      <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true" on:click={close}></div>
+
+      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+      <div class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+        <div class="sm:flex sm:items-start">
+          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+              {title}
+            </h3>
+            <div class="mt-2 text-sm text-gray-500">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}