zenno: use data from api

zenno/src/lib/Spark.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
-	import { sparks } from '$lib/data/spark';
+	import { type Spark } from '$lib/data/spark';
 
 	interface Props {
-		spark: number;
-		region?: keyof typeof sparks;
+		spark: Spark | null | undefined;
 	}
 
-	const { spark, region = 'global' }: Props = $props();
+	const { spark }: Props = $props();
 
-	const cur = $derived(sparks[region].find((s) => s.spark_id === spark));
 	const curClass = $derived.by(() => {
-		if (cur == null) {
+		if (spark == null) {
 			return [];
 		}
-		switch (cur.type) {
+		switch (spark.type) {
 			case 1:
 				return ['stat'];
 			case 2:
@@ -32,17 +30,17 @@
 				return [];
 		}
 	});
-	const stars = $derived('★'.repeat(cur?.rarity ?? 0));
+	const stars = $derived('★'.repeat(spark?.rarity ?? 0));
 </script>
 
-{#if cur != null}
+{#if spark != null}
 	<div
 		class={[
 			curClass,
 			'spark mx-1 flex items-center rounded-xl px-2 py-1 transition ease-in hover:shadow-md hover:ease-out motion-safe:duration-75 motion-safe:hover:-translate-y-0.5 dark:shadow-neutral-950',
 		]}
 	>
-		<span>{cur.name}</span>
+		<span>{spark.name}</span>
 		<span class="ml-2 text-xl text-amber-800 text-shadow-md dark:text-amber-300">{stars}</span>
 	</div>
 {/if}