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

Use tabs for top artists and top albums

Browse Source
This commit is contained in:
Claudio Ortolina
2025-06-25 11:41:54 +03:00
parent 9a35012d15
commit 0c84adde59
4 changed files with 158 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+3
View File
@@ -34,6 +34,9 @@ defmodule MusicLibraryWeb.CoreComponents do
defdelegate separator(assigns), to: Fluxon.Components.Separator
defdelegate sheet(assigns), to: Fluxon.Components.Sheet
defdelegate tooltip(assigns), to: Fluxon.Components.Tooltip
defdelegate tabs(assigns), to: Fluxon.Components.Tabs
defdelegate tabs_list(assigns), to: Fluxon.Components.Tabs
defdelegate tabs_panel(assigns), to: Fluxon.Components.Tabs
@doc """
Renders a simple form.
lib/music_library_web/live/stats_live/index.ex
+2 -10
View File
@@ -85,16 +85,12 @@ defmodule MusicLibraryWeb.StatsLive.Index do
end
attr :albums, :list, required: true
attr :title, :string, required: true
attr :collected_releases, :list, required: true
attr :wishlisted_releases, :list, required: true
def top_albums_by_period(assigns) do
~H"""
<div>
<h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-200 mb-3">
{@title}
</h2>
<div class="mt-4">
<div class="space-y-2">
<div
:for={album <- @albums}
@@ -151,14 +147,10 @@ defmodule MusicLibraryWeb.StatsLive.Index do
end
attr :artists, :list, required: true
attr :title, :string, required: true
def top_artists_by_period(assigns) do
~H"""
<div>
<h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-200 mb-3">
{@title}
</h2>
<div class="mt-4">
<div class="space-y-2">
<div :for={artist <- @artists} class="flex items-center space-x-3 p-2">
<img
lib/music_library_web/live/stats_live/index.html.heex
+67 -48
View File
@@ -69,54 +69,73 @@
</div>
<div>
<div class="mt-5 flex justify-between items-center">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top Albums")}
</h1>
<.refresh_lastfm_feed_button />
</div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-4 gap-5">
<.top_albums_by_period
albums={@top_albums.last_30_days}
title={gettext("Last 30 days")}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
<.top_albums_by_period
albums={@top_albums.last_90_days}
title={gettext("Last 90 days")}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
<.top_albums_by_period
albums={@top_albums.last_365_days}
title={gettext("Last year")}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
<.top_albums_by_period
albums={@top_albums.all_time}
title={gettext("All time")}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</div>
</div>
<div>
<div class="mt-5 flex justify-between items-center">
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top Artists")}
</h1>
<.refresh_lastfm_feed_button />
</div>
<div class="mt-5 grid grid-cols-1 lg:grid-cols-4 gap-5">
<.top_artists_by_period artists={@top_artists.last_30_days} title={gettext("Last 30 days")} />
<.top_artists_by_period artists={@top_artists.last_90_days} title={gettext("Last 90 days")} />
<.top_artists_by_period artists={@top_artists.last_365_days} title={gettext("Last year")} />
<.top_artists_by_period artists={@top_artists.all_time} title={gettext("All time")} />
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top Artists")}
</h1>
<.tabs class="mt-4">
<.tabs_list active_tab="top_artists_last_30_days" variant="segmented">
<:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")}</:tab>
<:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}</:tab>
<:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}</:tab>
<:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}</:tab>
</.tabs_list>
<.tabs_panel active name="top_artists_last_30_days">
<.top_artists_by_period artists={@top_artists.last_30_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_last_90_days">
<.top_artists_by_period artists={@top_artists.last_90_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_last_365_days">
<.top_artists_by_period artists={@top_artists.last_365_days} />
</.tabs_panel>
<.tabs_panel name="top_artists_all_time">
<.top_artists_by_period artists={@top_artists.all_time} />
</.tabs_panel>
</.tabs>
</div>
<div>
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
{gettext("Top Albums")}
</h1>
<.tabs class="mt-4">
<.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
<:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
<:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
<:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
<:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
</.tabs_list>
<.tabs_panel active name="top_albums_last_30_days">
<.top_albums_by_period
albums={@top_albums.last_30_days}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_last_90_days">
<.top_albums_by_period
albums={@top_albums.last_90_days}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_last_365_days">
<.top_albums_by_period
albums={@top_albums.last_365_days}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
<.tabs_panel name="top_albums_all_time">
<.top_albums_by_period
albums={@top_albums.all_time}
collected_releases={@top_albums.collected_releases}
wishlisted_releases={@top_albums.wishlisted_releases}
/>
</.tabs_panel>
</.tabs>
</div>
</div>
</div>