Add books and manga to about page

src/routes/about/+page.svelte

@@ -5,9 +5,11 @@
 	import SectionNav from '#lib/components/ui/SectionNav.svelte';
 	import Section from '#lib/components/ui/Section.svelte';
 	import Panel from '#lib/components/ui/Panel.svelte';
-	import AnimeSection from '#lib/components/about/AnimeSection.svelte';
+	import AniListSection from '#lib/components/about/AniListSection.svelte';
 	import MediaGrid from '#lib/components/about/MediaGrid.svelte';
 	import GameCard from '#lib/components/about/GameCard.svelte';
+	import BookGrid from '#lib/components/about/BookGrid.svelte';
+	import { sortBooks } from '#lib/books/books';
 	import SetupSection from '#lib/components/about/setup/SetupSection.svelte';
 	import ListeningSection from '#lib/components/about/listening/ListeningSection.svelte';
 	import type { PageProps } from './$types';
@@ -17,6 +19,7 @@
 	const byRating = (first: { rating: number }, second: { rating: number }) => second.rating - first.rating;
 	const shows = [...about.shows].sort(byRating);
 	const movies = [...about.movies].sort(byRating);
+	const books = sortBooks(about.books ?? []);
 	const mediaGroups = [
 		{ id: 'shows', title: 'TV Shows', items: shows, kind: 'show' as const },
 		{ id: 'movies', title: 'Movies', items: movies, kind: 'movie' as const }
@@ -28,8 +31,10 @@
 		{ id: 'games', label: 'Games', color: 'orange' },
 		{ id: 'shows', label: 'Shows', color: 'yellow' },
 		{ id: 'movies', label: 'Movies', color: 'green' },
+		...(books.length ? [{ id: 'books', label: 'Books', color: 'cyan' }] : []),
 		...(data.listening ? [{ id: 'music', label: 'Music', color: 'red' }] : []),
-		...(data.anime ? [{ id: 'anime', label: 'Anime', color: 'magenta' }] : [])
+		...(data.anime ? [{ id: 'anime', label: 'Anime', color: 'magenta' }] : []),
+		...(data.manga ? [{ id: 'manga', label: 'Manga', color: 'blue' }] : [])
 	]);
 </script>
 
@@ -69,6 +74,12 @@
 		</Section>
 	{/each}
 
+	{#if books.length}
+		<Section title="Books" id="books">
+			<BookGrid {books} />
+		</Section>
+	{/if}
+
 	{#if data.listening}
 		<Section title="Music" id="music">
 			<ListeningSection listening={data.listening} />
@@ -77,7 +88,13 @@
 
 	{#if data.anime}
 		<Section title="Anime" id="anime">
-			<AnimeSection anime={data.anime} />
+			<AniListSection profile={data.anime} />
+		</Section>
+	{/if}
+
+	{#if data.manga}
+		<Section title="Manga" id="manga">
+			<AniListSection profile={data.manga} />
 		</Section>
 	{/if}
 </div>