---
import PageLayout from "../layouts/PageLayout.astro";
import { getCollection } from "astro:content";
import Track from "../components/Track.astro";

const tracks = await getCollection("tracks");
---

<PageLayout
  title="Tracks"
  description="My entire music playlist. It contains all kinds of songs."
>
  <div class="not-prose">
    {
      tracks.map(({ data: { title, artist, album, youtubeLink } }, index) => (
        <Track {title} {artist} {album} {youtubeLink} index={++index} />
      ))
    }
  </div>
</PageLayout>
