Files
music_library/lib/music_library_web/live/stats_live/index.html.heex
T
2024-10-30 17:18:47 +00:00

47 lines
1.7 KiB
Plaintext

<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-md 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-md 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>
<.counter title={gettext("Total collection")} count={@collection_count} path={~p"/records"} />
<.counter title={gettext("Total wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
</dl>
</div>
<.stats_grid
data={@collection_count_by_format}
title={gettext("Formats")}
col_class="grid-cols-5"
/>
<.stats_grid data={@collection_count_by_type} title={gettext("Types")} col_class="grid-cols-6" />