Extract badge components

lib/music_library_web/live/stats_live/data_components.ex

@@ -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

@@ -129,48 +129,22 @@
           </div>
 
           <div class="flex gap-2">
-            <span
+            <.badge
               :if={track.album.musicbrainz_id == ""}
-              class={[
+              color={:gray}
-                "inline-flex items-center rounded-md",
+              text={gettext("No MB ID")}
-                "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>
             <.link
               :if={record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)}
               navigate={~p"/collection/#{record_id}"}
             >
-              <span class={[
+              <.badge color={:green} text={gettext("Collected")} />
-                "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>
             </.link>
             <.link
               :if={record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)}
               navigate={~p"/wishlist/#{record_id}"}
             >
-              <span class={[
+              <.badge color={:yellow} text={gettext("Wishlisted")} />
-                "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>
             </.link>
           </div>
 

priv/gettext/default.pot

@@ -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 ""