tomie/apps/tomie_web/lib/tomie_web/templates/listen/albums.html.leex

<div class="grid grid-cols-5 gap-4">
  <%= live_component @socket, TomieWeb.ListenLive.SidebarComponent %>

  <div class="col-span-4">
    <h1>Top Albums</h1>

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 mb-10">
    <%= for item <- @albums[:top] do %>
      <%= live_patch class: "relative", to: Routes.live_path(@socket, TomieWeb.AlbumLive.Show, item.model.id) do %>
        <img src="<%= Listens.Albums.get_album_image(item.model, :large) %>" class="w-full">
        <span class="absolute top-0 left-0 m-1 p-1 bg-surface-alt text-center rounded">
          <%= item.listens %>
        </span>
      <% end %>
    <% end %>
    </div>

    <h1>Newest Albums</h1>

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
      <%= for album <- @albums[:newest] do %>
        <%= live_patch class: "relative", to: Routes.live_path(@socket, TomieWeb.AlbumLive.Show, album) do %>
          <img src="<%= Listens.Albums.get_album_image(album, :large) %>">
          <span class="absolute top-0 left-0 bg-surface-alt p-1 text-center">
            <%= album.name %>
          </span>
        <% end %>
      <% end %>
    </div>
  </div>
</div>