refactor(tools): move birthdays to module

2 files changed, 36 insertions, 29 deletions

diff --git a/src/lib/Tools/CharacterBirthdays.svelte b/src/lib/Tools/CharacterBirthdays.svelte
new file mode 100644
index 00000000..56b332a5
--- /dev/null
+++ b/src/lib/Tools/CharacterBirthdays.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { todaysCharacterBirthdays } from '$lib/AniList/character';
+	import Error from '$lib/Error.svelte';
+</script>
+
+{#await todaysCharacterBirthdays()}
+	Loading ...
+{:then birthdays}
+	<div id="characters">
+		{#each birthdays as birthday}
+			<div>
+				<a href={`https://anilist.co/character/${birthday.id}`} target="_blank">
+					{birthday.name.full}
+					<img src={birthday.image.large} alt="Character (Large)" class="character-image" />
+				</a>
+			</div>
+		{/each}
+	</div>
+{:catch}
+	<Error type="Character" />
+{/await}
+
+<style>
+	#characters {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
+		grid-gap: 0;
+		grid-row-gap: 1rem;
+	}
+
+	.character-image {
+		height: 20vh;
+	}
+</style>
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 80777c98..d953dc07 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import ActivityHistory from '$lib/Tools/ActivityHistory.svelte';
-	import { todaysCharacterBirthdays } from '$lib/AniList/character';
 	import Wrapped from '$lib/Tools/Wrapped.svelte';
 	import { browser } from '$app/environment';
 	import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte';
 	import { onMount } from 'svelte';
-	import Error from '$lib/Error.svelte';
+	import CharacterBirthdays from '$lib/Tools/CharacterBirthdays.svelte';
 
 	export let data;
 
@@ -52,37 +51,11 @@
 {:else if tool === 'episode_discussion_collector'}
 	<EpisodeDiscussionCollector />
 {:else if tool === 'todays_character_birthdays'}
-	{#await todaysCharacterBirthdays()}
-		Loading ...
-	{:then birthdays}
-		<div id="characters">
-			{#each birthdays as birthday}
-				<div>
-					<a href={`https://anilist.co/character/${birthday.id}`} target="_blank">
-						{birthday.name.full}
-						<img src={birthday.image.large} alt="Character (Large)" class="character-image" />
-					</a>
-				</div>
-			{/each}
-		</div>
-	{:catch}
-		<Error type="Character" />
-	{/await}
+	<CharacterBirthdays />
 {/if}
 
 <style>
 	#wrapped {
 		width: 980px;
 	}
-
-	#characters {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
-		grid-gap: 0;
-		grid-row-gap: 1rem;
-	}
-
-	.character-image {
-		height: 20vh;
-	}
 </style>