From fb3c43b53c85504e246c22470e3c8efcd5d39326 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Tue, 20 May 2025 13:19:51 +0200
Subject: [PATCH] added Modal component

---
 web/src/lib/Modal.svelte | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 web/src/lib/Modal.svelte

diff --git a/web/src/lib/Modal.svelte b/web/src/lib/Modal.svelte
new file mode 100644
index 0000000..85b2c6f
--- /dev/null
+++ b/web/src/lib/Modal.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let { children }: { children: Snippet } = $props();
+
+  let dialog:  HTMLDialogElement; 
+
+  export function open(){
+    dialog.showModal()
+  }
+
+  export function close(){
+    dialog.close();
+  }
+
+</script>
+
+<dialog
+  bind:this={dialog}
+  closedby="any"
+  class="bg-gradient-to-br from-blue-100 to-indigo-200 p-5 center-dialog rounded-2xl backdrop:bg-black/50 backdrop:backdrop-blur-xs"
+>
+  {@render children?.()}
+</dialog>
+
+<style scoped>
+  .center-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+</style>