Updates

src/components/styled/SWModal.svelte

@@ -0,0 +1,88 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2024 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {createEventDispatcher, onMount} from "svelte";
+
+    export let title: string;
+    export let open: boolean;
+    let internalOpen = open;
+
+    const dispatch = createEventDispatcher();
+
+    $: if (open && !internalOpen) {
+        dialog.showModal();
+        internalOpen = true;
+    } else if (!open && internalOpen) {
+        dialog.close();
+        internalOpen = false;
+    }
+
+    let dialog: HTMLDialogElement;
+
+    onMount(() => {
+        if (open) {
+            dialog.showModal();
+            internalOpen = true;
+        }
+    });
+
+    function close() {
+        open = false;
+        internalOpen = false;
+        dispatch("close");
+    }
+</script>
+
+<dialog bind:this={dialog} on:close={close} on:cancel={close} on:click={() => dialog.close()} aria-hidden="true">
+    <div on:click|stopPropagation aria-hidden="true">
+        <div class="spaced bordered">
+            <h1>{title}</h1>
+        </div>
+        <div class="spaced main bordered">
+            <slot />
+        </div>
+        <div class="footer spaced" on:click={() => dialog.close()} aria-hidden="true">
+            <slot name="footer" />
+        </div>
+    </div>
+</dialog>
+
+<style lang="scss">
+  h1 {
+    @apply text-4xl font-bold;
+  }
+
+  dialog {
+    @apply max-h-full max-w-md w-full rounded-lg shadow-lg
+        dark:bg-neutral-800 dark:text-neutral-100;
+  }
+
+  .spaced {
+    @apply p-6;
+  }
+
+  .bordered {
+    @apply border-b border-neutral-200 dark:border-neutral-700;
+  }
+
+  .footer {
+    @apply flex mx-4 my-2;
+  }
+</style>