Claudio Ortolina
96 lines
3.5 KiB
Plaintext
96 lines
3.5 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">
|
|
<.album_preview
|
|
record={@latest_record}
|
|
title={gettext("Latest purchase")}
|
|
class="col-span-2 sm:col-span-3"
|
|
/>
|
|
<.counter title={gettext("Total collection")} count={@collection_count} path={~p"/records"} />
|
|
<.counter title={gettext("Total wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
|
</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 divide-x",
|
|
stats_class(@collection_count_by_format)
|
|
]}>
|
|
<div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
|
|
<%= Record.format_long_label(format) %>
|
|
</dt>
|
|
<dd class="mt-1 text-center">
|
|
<a
|
|
class="text-xl lg:text-2xl 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 divide-x",
|
|
stats_class(@collection_count_by_type)
|
|
]}>
|
|
<div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
|
|
<%= Record.type_long_label(type) %>
|
|
</dt>
|
|
<dd class="mt-1 text-center">
|
|
<a
|
|
class="text-xl lg:text-2xl 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>
|
|
|
|
<div class="flow-root">
|
|
<h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
|
|
<%= gettext("Scrobble activity") %>
|
|
</h1>
|
|
<ul role="list" class="-mb-8 mt-5">
|
|
<li :for={{id, track} <- @recent_tracks} id={"track-#{id}"} class="group">
|
|
<div class="relative pb-8">
|
|
<span
|
|
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-gray-200"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
<div class="relative flex space-x-3 items-center">
|
|
<img class="h-12 w-12 rounded-md" src={track.cover_url} alt={track.title} />
|
|
<div class="flex min-w-0 flex-1 justify-between space-x-4">
|
|
<div class="font-semibold">
|
|
<p class="text-sm md:text-base block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
|
|
<%= track.artist.name %>
|
|
</p>
|
|
<p class="text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
|
<%= track.title %>
|
|
</p>
|
|
</div>
|
|
<div class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400">
|
|
<%= track.scrobbled_at_label %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|