list page pt. 10 song entry component

src/routes/list/+page.svelte

@@ -3,6 +3,7 @@
 	import { onMount } from "svelte";
 	import { z } from "zod";
 	import { invalidate } from "$app/navigation";
+	import SongEntry from "$lib/components/SongEntry.svelte";
 	import { db as clientDb } from "$lib/db/client-db";
 	import {
 		MalAnimeListQuerySchema,
@@ -146,32 +147,16 @@
 
 	<ul class="mt-3 space-y-2">
 		{#each data.songRows as r (String(r.annId) + ":" + String(r.annSongId))}
-			<li class="rounded border px-3 py-2">
-				<div class="font-medium">
-					{r.songName}
-					{#if songArtistLabel(r)}
-						<span class="text-sm text-muted-foreground">
-							— {songArtistLabel(r)}</span
-						>
-					{/if}
-				</div>
-
-				<div class="text-sm text-muted-foreground">
-					{r.animeName} • ANN {r.annId} • MAL {r.malId} • link type {r.type} #{r.number}
-				</div>
-
-				{#if r.fileName}
-					<div class="mt-2 text-sm">
-						<a
-							class="hover:underline"
-							href={"https://nawdist.animemusicquiz.com/" + r.fileName}
-							target="_blank"
-							rel="noreferrer"
-						>
-							Audio file
-						</a>
-					</div>
-				{/if}
+			<li>
+				<SongEntry
+					animeName={r.animeName}
+					type={r.type}
+					number={r.number}
+					songName={r.songName}
+					artistName={songArtistLabel(r)}
+					fileName={r.fileName}
+					showPlayer={true}
+				/>
 			</li>
 		{/each}
 	</ul>