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

Extract badge components

Browse Source
This commit is contained in:
Claudio Ortolina
2025-01-02 12:35:33 +00:00
parent 5d40080741
commit b9e3293877
3 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/stats_live/data_components.ex
+49
View File
@@ -65,4 +65,53 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
</div>
"""
end
attr :color, :atom, values: [:green, :yellow, :gray], required: true
attr :text, :string, required: true
def badge(assigns) do
case assigns.color do
:green ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-green-50 dark:bg-green-500/10",
"text-green-700 dark:text-green-400",
"ring-green-600/20 dark:ring-green-500/20"
]}>
{@text}
</span>
"""
:yellow ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-yellow-50 dark:bg-yellow-400/10",
"text-yellow-800 dark:text-yellow-500",
"ring-yellow-600/20 dark:ring-yellow-400/20"
]}>
{@text}
</span>
"""
:gray ->
~H"""
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-zinc-50 dark:bg-zinc-500/10",
"text-zinc-700 dark:text-zinc-400",
"ring-zinc-600/20 dark:ring-zinc-500/20"
]}>
{@text}
</span>
"""
end
end
end
lib/music_library_web/live/stats_live/index.html.heex
+6 -32
View File
@@ -129,48 +129,22 @@
</div>
<div class="flex gap-2">
<span
<.badge
:if={track.album.musicbrainz_id == ""}
class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-zinc-50 dark:bg-zinc-500/10",
"text-zinc-700 dark:text-zinc-400",
"ring-zinc-600/20 dark:ring-zinc-500/20"
]}
>
{gettext("No MB ID")}
</span>
color={:gray}
text={gettext("No MB ID")}
/>
<.link
:if={record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)}
navigate={~p"/collection/#{record_id}"}
>
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-green-50 dark:bg-green-500/10",
"text-green-700 dark:text-green-400",
"ring-green-600/20 dark:ring-green-500/20"
]}>
{gettext("Collected")}
</span>
<.badge color={:green} text={gettext("Collected")} />
</.link>
<.link
:if={record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)}
navigate={~p"/wishlist/#{record_id}"}
>
<span class={[
"inline-flex items-center rounded-md",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-yellow-50 dark:bg-yellow-400/10",
"text-yellow-800 dark:text-yellow-500",
"ring-yellow-600/20 dark:ring-yellow-400/20"
]}>
{gettext("Wishlisted")}
</span>
<.badge color={:yellow} text={gettext("Wishlisted")} />
</.link>
</div>
priv/gettext/default.pot
+4 -4
View File
@@ -342,17 +342,17 @@ msgid "Scrobble activity"
msgstr ""
#: lib/music_library_web/live/record_live/import_component.ex:80
#: lib/music_library_web/live/stats_live/index.html.heex:193
#: lib/music_library_web/live/stats_live/index.html.heex:167
#, elixir-autogen, elixir-format
msgid "Choose which format to import"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex:157
#: lib/music_library_web/live/stats_live/index.html.heex:141
#, elixir-autogen, elixir-format
msgid "Collected"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex:172
#: lib/music_library_web/live/stats_live/index.html.heex:147
#, elixir-autogen, elixir-format
msgid "Wishlisted"
msgstr ""
@@ -402,7 +402,7 @@ msgstr ""
msgid "Error refreshing cover"
msgstr ""
#: lib/music_library_web/live/stats_live/index.html.heex:143
#: lib/music_library_web/live/stats_live/index.html.heex:135
#, elixir-autogen, elixir-format
msgid "No MB ID"
msgstr ""