Extract round badge component

lib/music_library_web/components/core_components.ex

@@ -621,6 +621,26 @@ defmodule MusicLibraryWeb.CoreComponents do
     """
   end
 
+  @doc """
+  Renders a round badge.
+  """
+  attr :text, :string, required: true
+
+  def round_badge(assigns) do
+    ~H"""
+    <span class={[
+      "inline-flex items-center rounded-full",
+      "px-2 py-1 text-xs font-medium",
+      "ring-1 ring-inset",
+      "bg-gray-50 dark:bg-gray-400/10",
+      "text-gray-600 dark:text-gray-500",
+      "ring-gray-500/10 dark:ring-gray-400/20"
+    ]}>
+      {assigns.text}
+    </span>
+    """
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do

lib/music_library_web/components/record_components.ex

@@ -53,16 +53,7 @@ defmodule MusicLibraryWeb.RecordComponents do
                 <span class="sr-only">
                   {gettext("Number of included records")}
                 </span>
-                <span class={[
-                  "inline-flex items-center rounded-full",
-                  "px-2 py-1 text-xs font-medium",
-                  "ring-1 ring-inset",
-                  "bg-gray-50 dark:bg-gray-400/10",
-                  "text-gray-600 dark:text-gray-500",
-                  "ring-gray-500/10 dark:ring-gray-400/20"
-                ]}>
-                  {Records.Record.child_release_groups_count(record)}
-                </span>
+                <.round_badge text={Records.Record.child_release_groups_count(record)} />
               </span>
               <span :if={record.purchased_at}>
                 ·
@@ -91,16 +82,7 @@ defmodule MusicLibraryWeb.RecordComponents do
                 <span class="sr-only">
                   {gettext("Number of included records")}
                 </span>
-                <span class={[
-                  "inline-flex items-center rounded-full",
-                  "px-2 py-1 text-xs font-medium",
-                  "ring-1 ring-inset",
-                  "bg-gray-50 dark:bg-gray-400/10",
-                  "text-gray-600 dark:text-gray-500",
-                  "ring-gray-500/10 dark:ring-gray-400/20"
-                ]}>
-                  {Records.Record.child_release_groups_count(record)}
-                </span>
+                <.round_badge text={Records.Record.child_release_groups_count(record)} />
               </span>
             </p>
             <p :if={record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">