Claudio Ortolina
109 lines
4.1 KiB
Plaintext
109 lines
4.1 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>
|
|
<div class="overflow-hidden rounded-md 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-md 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-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-5 divide-x">
|
|
<div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
|
|
<dt class="text-base text-center 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 text-center">
|
|
<a
|
|
class="text-xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
|
|
href={~p"/records?query=format:#{format}"}
|
|
>
|
|
<%= 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("Types") %>
|
|
</h1>
|
|
<dl class="mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-6 divide-x">
|
|
<div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
|
|
<dt class="text-base text-center 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 text-center">
|
|
<a
|
|
class="text-xl font-semibold hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
|
|
href={~p"/records?query=type:#{type}"}
|
|
>
|
|
<%= count %>
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|