---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import TracksList from '@shared/components/cards/music/TracksList.astro'
import TrackInfo from '@shared/components/cards/music/TrackInfo.astro'

const topTrackIds = [8, 9, 10, 11, 12, 13]
---

<DefaultLayout title="Music components" pageMenu="extra.music">
  <div class="row">
    <div class="col-lg-8">
      <TracksList />
    </div>
    <div class="col-lg-4">
      <h2 class="mb-3">Top tracks</h2>

      <div class="row row-cards">
        {
          topTrackIds.map((trackId) => (
            <div class="col-md-6 col-lg-12">
              <TrackInfo trackId={trackId} />
            </div>
          ))
        }
      </div>
    </div>
  </div>
</DefaultLayout>