Fetch track thumbnails remotely

src/components/Track.astro

@@ -1,28 +1,46 @@
 ---
-import { Image } from "astro:assets";
-
 interface Props {
   title: string;
   artist: string;
   album: string;
   youtubeLink: string;
-  cover: any;
+  index: number;
 }
 
-const { title, artist, album, youtubeLink, cover } = Astro.props;
+const { title, artist, album, youtubeLink, index } = Astro.props;
+
+const uniqueArtists = [...new Set(artist.split(",").map((a) => a.trim()))].join(
+  ", ",
+);
+
+const videoId = youtubeLink.split("v=")[1];
+const thumbnail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
 ---
 
-<figure>
+<figure
+  class="relative flex flex-col border border-neutral-400 duration-300 hover:scale-105 active:scale-105 dark:border-neutral-500"
+>
+  <span
+    class="absolute -start-2 -top-2 border border-neutral-400 bg-white px-2 text-lg font-bold dark:border-neutral-500 dark:bg-neutral-800"
+    >{index}</span
+  >
   <a href={youtubeLink}>
-    <Image
-      src={cover}
+    <img
+      src={thumbnail}
       alt={`Cover for the song '${title}' by artist(s) '${artist}'`}
-      class="border border-neutral-400 duration-300 hover:scale-105 active:scale-105 dark:border-neutral-500"
+      class="aspect-video w-full border-b border-neutral-400 dark:border-neutral-500"
     />
   </a>
-  <figcaption class="flex flex-col p-4 text-center">
+  <figcaption
+    class="flex flex-1 flex-col p-6 text-center"
+    style="word-break: break-word;"
+  >
     <p class="text-lg font-bold">{title}</p>
-    <p>{artist}</p>
-    <p class="text-sm">{album}</p>
+    <p class="mb-3">{uniqueArtists}</p>
+    <p
+      class="mt-auto border-t border-neutral-400 pt-3 text-sm dark:border-neutral-500"
+    >
+      {album}
+    </p>
   </figcaption>
 </figure>