cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract stats album preview component

Browse Source
This commit is contained in:
Claudio Ortolina
2024-10-30 08:49:40 +00:00
parent 6b9ebf6d6e
commit 4ce71cf4e2
3 changed files with 51 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/stats_live/data_components.ex
+41
View File
@@ -1,6 +1,47 @@
defmodule MusicLibraryWeb.StatsLive.DataComponents do
use MusicLibraryWeb, :live_component
attr :record, MusicLibrary.Records.Record, required: true
attr :title, :string, required: true
attr :class, :string, default: ""
def album_preview(assigns) do
~H"""
<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 cursor-pointer",
@class
]}
phx-click={JS.navigate(~p"/records/#{@record}")}
>
<dt>
<img
class="absolute w-20 rounded-md shadow"
src={~p"/covers/#{@record.id}"}
alt={@record.title}
/>
<p class="ml-24 truncate text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
<%= @title %>
</p>
</dt>
<dd class="ml-24 flex items-baseline pb-6 sm:pb-7">
<p class="font-semibold">
<.link
:for={artist <- @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">
<%= @record.title %>
</span>
</p>
</dd>
</div>
"""
end
attr :data, :list,
required: true,
doc: """
lib/music_library_web/live/stats_live/index.html.heex
+5 -29
View File
@@ -3,35 +3,11 @@
<%= 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>
<.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>