adds new trail page

web/src/lib/components/base/modal.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    export let id: string;
+    export let title: string;
+    export function openModal() {
+        (document.getElementById(id) as HTMLDialogElement).showModal();
+    }
+
+    export function closeModal() {
+        (document.getElementById(id) as HTMLDialogElement).close();
+    }
+</script>
+
+<slot {openModal} />
+<dialog
+    {id}
+    tabindex="-1"
+    aria-hidden="true"
+    class="relative w-full max-w-2xl max-h-full rounded-xl"
+>
+    <!-- Modal content -->
+    <div class="relative bg-white shadow dark:bg-gray-700">
+        <!-- Modal header -->
+        <div
+            class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
+        >
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+                {title}
+            </h3>
+            <button
+                type="button"
+                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+                on:click={closeModal}
+            >
+                <i class="fa fa-close"></i>
+                <span class="sr-only">Close modal</span>
+            </button>
+        </div>
+        <!-- Modal body -->
+        <div class="p-4 md:p-5 space-y-4">
+            <slot name="content" />
+        </div>
+        <!-- Modal footer -->
+        <div
+            class="p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"
+        >
+            <slot name="footer" {closeModal} />
+        </div>
+    </div>
+</dialog>
+
+<style>
+</style>