Extract components to render counter stats

lib/music_library_web/components/stats_components.ex

@@ -70,6 +70,34 @@ defmodule MusicLibraryWeb.StatsComponents do
     """
   end
 
+  attr :categories_with_counts, :list, required: true
+  attr :category_format_fn, :any, required: true
+  attr :category_path_fn, :any, required: true
+
+  def counters_by_category(assigns) do
+    ~H"""
+    <%!-- TODO: replace with OSS version --%>
+    <dl class={[
+      "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
+      stats_class(@categories_with_counts)
+    ]}>
+      <div :for={{category, count} <- @categories_with_counts} class="px-2 py-5 sm:px-4">
+        <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
+          {@category_format_fn.(category)}
+        </dt>
+        <dd class="mt-1 text-center">
+          <.link
+            class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
+            navigate={@category_path_fn.(category)}
+          >
+            {count}
+          </.link>
+        </dd>
+      </div>
+    </dl>
+    """
+  end
+
   def refresh_lastfm_feed_button(assigns) do
     ~H"""
     <button
@@ -195,4 +223,22 @@ defmodule MusicLibraryWeb.StatsComponents do
       if tracked_release.release_id == release_id, do: tracked_release.record_id
     end)
   end
+
+  # The Tailwind build step requires all needed classes to be explicitly referenced
+  # in the source code, and not dynamically generated. This implies that one cannot
+  # (for example) interpolate a number in a class name.
+  defp stats_class(collection) do
+    case Enum.count(collection) do
+      1 -> "grid-cols-1"
+      2 -> "grid-cols-2"
+      3 -> "grid-cols-3"
+      4 -> "grid-cols-4"
+      5 -> "grid-cols-5"
+      6 -> "grid-cols-6"
+      7 -> "grid-cols-7"
+      8 -> "grid-cols-8"
+      9 -> "grid-cols-9"
+      _other -> ""
+    end
+  end
 end

lib/music_library_web/live/stats_live/index.ex

@@ -151,24 +151,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     )
   end
 
-  # The Tailwind build step requires all needed classes to be explicitly referenced
-  # in the source code, and not dynamically generated. This implies that one cannot
-  # (for example) interpolate a number in a class name.
-  defp stats_class(collection) do
-    case Enum.count(collection) do
-      1 -> "grid-cols-1"
-      2 -> "grid-cols-2"
-      3 -> "grid-cols-3"
-      4 -> "grid-cols-4"
-      5 -> "grid-cols-5"
-      6 -> "grid-cols-6"
-      7 -> "grid-cols-7"
-      8 -> "grid-cols-8"
-      9 -> "grid-cols-9"
-      _other -> ""
-    end
-  end
-
   defp format_scrobbled_at_uts(uts) do
     uts
     |> DateTime.from_unix!()

lib/music_library_web/live/stats_live/index.html.heex

@@ -22,50 +22,22 @@
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     {gettext("Formats")}
   </h1>
-  <%!-- TODO: replace with OSS version --%>
+  <.counters_by_category
-  <dl class={[
+    categories_with_counts={@collection_count_by_format}
-    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
+    category_format_fn={&format_label/1}
-    stats_class(@collection_count_by_format)
+    category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
-  ]}>
+  />
-    <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
-      <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
-        {format_label(format)}
-      </dt>
-      <dd class="mt-1 text-center">
-        <.link
-          class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
-          navigate={~p"/collection?query=format:#{format}"}
-        >
-          {count}
-        </.link>
-      </dd>
-    </div>
-  </dl>
 </div>
 
 <div>
   <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
     {gettext("Types")}
   </h1>
-  <%!-- TODO: replace with OSS version --%>
+  <.counters_by_category
-  <dl class={[
+    categories_with_counts={@collection_count_by_type}
-    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
+    category_format_fn={&type_label/1}
-    stats_class(@collection_count_by_type)
+    category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
-  ]}>
+  />
-    <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
-      <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
-        {type_label(type)}
-      </dt>
-      <dd class="mt-1 text-center">
-        <.link
-          class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
-          navigate={~p"/collection?query=type:#{type}"}
-        >
-          {count}
-        </.link>
-      </dd>
-    </div>
-  </dl>
 </div>
 
 <div>