music_library/lib/music_library_web/controllers/stats_html/index.html.heex

<div>
  <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
    <%= gettext("Basics") %>
  </h1>
  <dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
    <div
      class="relative overflow-hidden rounded-lg bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 col-span-2 sm:col-span-3 cursor-pointer"
      phx-click={JS.navigate(~p"/records/#{@latest_record}")}
    >
      <dt>
        <img
          class="absolute w-20 rounded-lg shadow"
          src={~p"/covers/#{@latest_record.id}"}
          alt={@latest_record.title}
        />
        <p class="ml-24 truncate text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
          <%= gettext("Latest purchase") %>
        </p>
      </dt>
      <dd class="ml-24 flex items-baseline pb-6 sm:pb-7">
        <p class="font-semibold">
          <.link
            :for={artist <- @latest_record.artists}
            class="text-sm md:text-base lg:text-2xl text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
            patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
          >
            <%= artist.name %>
          </.link>
          <span class="text-sm md:text-base block text-gray-600 dark:text-gray-200">
            <%= @latest_record.title %>
          </span>
        </p>
      </dd>
    </div>
    <div class="overflow-hidden rounded-lg bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
      <dt>
        <p class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
          <%= gettext("Total collection") %>
        </p>
      </dt>
      <dd class="flex items-baseline pb-6 sm:pb-7">
        <a
          href={~p"/records"}
          class="text-2xl font-semibold text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
        >
          <%= @collection_count %>
        </a>
      </dd>
    </div>
    <div class="overflow-hidden rounded-lg bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
      <dt>
        <p class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
          <%= gettext("Total wishlist") %>
        </p>
      </dt>
      <dd class="flex items-baseline pb-6 sm:pb-7">
        <a
          href={~p"/wishlist"}
          class="text-2xl font-semibold text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
        >
          <%= @wishlist_count %>
        </a>
      </dd>
    </div>
  </dl>
</div>

<div>
  <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
    <%= gettext("Formats") %>
  </h1>
  <dl class="mt-5 grid divide-y divide-gray-200 dark:divide-slate-300/10 overflow-hidden rounded-lg bg-white dark:bg-zinc-700 shadow grid-cols-5 md:divide-x md:divide-y-0">
    <div :for={{format, count} <- @collection_count_by_format} class="px-4 py-5 sm:p-6">
      <dt class="text-base max-sm:text-xs font-normal text-gray-900 dark:text-gray-400 break-keep">
        <%= Record.format_long_label(format) %>
      </dt>
      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
        <div class="flex items-baseline text-2xl font-semibold">
          <a
            class="hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
            href={~p"/records?query=format:#{format}"}
          >
            <%= count %>
          </a>
        </div>
      </dd>
    </div>
  </dl>
</div>

<div>
  <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
    <%= gettext("Types") %>
  </h1>
  <dl class="mt-5 grid divide-y divide-gray-200 dark:divide-slate-300/10 overflow-hidden rounded-lg bg-white dark:bg-zinc-700 shadow grid-cols-6 md:divide-x md:divide-y-0">
    <div :for={{type, count} <- @collection_count_by_type} class="px-4 py-5 sm:p-6">
      <dt class="text-base max-sm:text-xs font-normal text-gray-900 dark:text-gray-400 break-keep">
        <%= Record.type_long_label(type) %>
      </dt>
      <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
        <div class="flex items-baseline text-2xl font-semibold">
          <a
            class="hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
            href={~p"/records?query=type:#{type}"}
          >
            <%= count %>
          </a>
        </div>
      </dd>
    </div>
  </dl>
</div>