Show Goodreads books on about page

src/routes/about/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { about, profile } from '#lib/content';
+	import { about, books, profile } from '#lib/content';
 	import PageHeader from '#lib/components/ui/PageHeader.svelte';
 	import ProfileIntro from '#lib/components/ui/ProfileIntro.svelte';
 	import SectionNav from '#lib/components/ui/SectionNav.svelte';
@@ -8,8 +8,7 @@
 	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 BooksSection from '#lib/components/about/books/BooksSection.svelte';
 	import SetupSection from '#lib/components/about/setup/SetupSection.svelte';
 	import ListeningSection from '#lib/components/about/listening/ListeningSection.svelte';
 	import type { PageProps } from './$types';
@@ -19,7 +18,6 @@
 	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 }
@@ -76,7 +74,7 @@
 
 	{#if books.length}
 		<Section title="Books" id="books">
-			<BookGrid {books} />
+			<BooksSection {books} />
 		</Section>
 	{/if}