Migrate to svelte 5

src/lib/LiteUI/LiteCardIcon.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
-    import type { hubType } from "src/ts/characterCards";
-    export let card: hubType
+
+    import { type hubType } from "src/ts/characterCards";
+    interface Props {
+        card: hubType;
+        onclick?: (event: MouseEvent & {
+            currentTarget: EventTarget & HTMLButtonElement;
+        }) => any
+    }
+
+    let { card, onclick }: Props = $props();
 </script>
 
-<button class="border p-4 flex hover:ring-2 rounded-md transition items-start justify-start" on:click>
+<button class="border p-4 flex hover:ring-2 rounded-md transition items-start justify-start" onclick={onclick}>
     <div class="bg-white rounded-md shadow-md p-4 relative w-32 h-48 min-w-32 min-h-48">
         {#key card.img}
             <img src={"https://sv.risuai.xyz/resource/" + card.img} alt={card.name} class="absolute inset-0 w-full h-full object-cover rounded-md">
@@ -20,7 +28,7 @@
         <div class="mt-2 w-full flex flex-wrap">
             {#each card.tags as tag}
                 {#if tag}
-                    <button class="bg-gray-200 text-gray-800 text-xs font-semibold rounded-full p-2 mt-2 ml-2">{tag}</button>
+                    <div class="bg-gray-200 text-gray-800 text-xs font-semibold rounded-full p-2 mt-2 ml-2">{tag}</div>
                 {/if}
             {/each}
         </div>