Update

src/components/admin/pages/event/RefereesList.svelte

@@ -20,21 +20,25 @@
 <script lang="ts">
     import type {ExtendedEvent} from "@type/event.ts";
     import {Button} from "flowbite-svelte";
-    import {PlusSolid} from "flowbite-svelte-icons";
+    import {PlusOutline} from "flowbite-svelte-icons";
     import SWModal from "@components/styled/SWModal.svelte";
     import SWButton from "@components/styled/SWButton.svelte";
     import TypeAheadSearch from "@components/admin/components/TypeAheadSearch.svelte";
     import {players} from "@stores/stores.ts";
     import {eventRepo} from "@repo/event.ts";
 
-    export let data: ExtendedEvent;
+  interface Props {
+    data: ExtendedEvent;
+  }
 
-    let searchValue = "";
-    let selectedPlayer: string | null = null;
+  let { data }: Props = $props();
 
-    let referees = data.event.referees;
+    let searchValue = $state("");
+    let selectedPlayer: string | null = $state(null);
 
-    let showAdd = false;
+    let referees = $state(data.event.referees);
+
+    let showAdd = $state(false);
 
     async function addReferee() {
         if (selectedPlayer) {
@@ -76,7 +80,7 @@
 </ul>
 
 <Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" on:click={() => showAdd = true}>
-    <PlusSolid/>
+    <PlusOutline/>
 </Button>
 
 <SWModal title="Schiedsrichter hinzufügen" bind:open={showAdd}>
@@ -86,10 +90,12 @@
                              items={$players.map(v => ({ name: v.name, value: v.uuid }))}/>
         </div>
     </div>
-    <div slot="footer" class="flex flex-grow justify-end">
-        <SWButton on:click={reset} type="gray">Abbrechen</SWButton>
-        <SWButton on:click={addReferee}>Hinzufügen</SWButton>
-    </div>
+    {#snippet footer()}
+    <div  class="flex flex-grow justify-end">
+          <SWButton on:click={reset} type="gray">Abbrechen</SWButton>
+          <SWButton on:click={addReferee}>Hinzufügen</SWButton>
+      </div>
+  {/snippet}
 </SWModal>
 
 <style>