Inline DataComponents functions and remove the component

No need to abstract out when it's used only in one place

lib/music_library_web/components/data_components.ex

@@ -1,68 +0,0 @@
-defmodule MusicLibraryWeb.DataComponents do
-  use MusicLibraryWeb, :live_component
-
-  attr :record, MusicLibrary.Records.Record, required: true
-  attr :title, :string, required: true
-  attr :class, :string
-
-  def album_preview(assigns) do
-    ~H"""
-    <div
-      class={[
-        "relative overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6 cursor-pointer",
-        @class
-      ]}
-      phx-click={JS.navigate(~p"/collection/#{@record}")}
-    >
-      <dt>
-        <img
-          class="absolute w-20 rounded-md shadow-sm"
-          src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
-          alt={@record.title}
-        />
-        <p class="ml-24 truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
-          {@title}
-        </p>
-      </dt>
-      <dd class="ml-24 flex items-baseline pb-4 sm:pb-6">
-        <p class="font-semibold">
-          <span class="text-sm md:text-base lg:text-2xl block text-zinc-900 dark:text-zinc-300">
-            {@record.title}
-          </span>
-          <.link
-            :for={artist <- @record.artists}
-            class="text-sm md:text-base text-zinc-600 dark:text-zinc-200 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
-            navigate={~p"/artists/#{artist.musicbrainz_id}"}
-          >
-            {artist.name}
-          </.link>
-        </p>
-      </dd>
-    </div>
-    """
-  end
-
-  attr :title, :string, required: true
-  attr :count, :integer, required: true
-  attr :path, :string, required: true
-
-  def counter(assigns) do
-    ~H"""
-    <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6">
-      <dt class="sm:mt-3">
-        <p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
-          {@title}
-        </p>
-      </dt>
-      <dd class="mt-1">
-        <.link
-          navigate={@path}
-          class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
-        >
-          {@count}
-        </.link>
-      </dd>
-    </div>
-    """
-  end
-end

lib/music_library_web/live/stats_live/index.ex

@@ -1,12 +1,76 @@
 defmodule MusicLibraryWeb.StatsLive.Index do
   use MusicLibraryWeb, :live_view
 
-  import MusicLibraryWeb.DataComponents
   import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
   import MusicLibraryWeb.ChartComponents
 
   alias MusicLibrary.{Artists, Collection, Records, Wishlist}
 
+  attr :record, MusicLibrary.Records.Record, required: true
+  attr :title, :string, required: true
+  attr :class, :string
+
+  defp album_preview(assigns) do
+    ~H"""
+    <div
+      class={[
+        "relative overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6 cursor-pointer",
+        @class
+      ]}
+      phx-click={JS.navigate(~p"/collection/#{@record}")}
+    >
+      <dt>
+        <img
+          class="absolute w-20 rounded-md shadow-sm"
+          src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash}"}
+          alt={@record.title}
+        />
+        <p class="ml-24 truncate text-xs sm:text-sm font-medium text-zinc-500 dark:text-zinc-400">
+          {@title}
+        </p>
+      </dt>
+      <dd class="ml-24 flex items-baseline pb-4 sm:pb-6">
+        <p class="font-semibold">
+          <span class="text-sm md:text-base lg:text-2xl block text-zinc-900 dark:text-zinc-300">
+            {@record.title}
+          </span>
+          <.link
+            :for={artist <- @record.artists}
+            class="text-sm md:text-base text-zinc-600 dark:text-zinc-200 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
+            navigate={~p"/artists/#{artist.musicbrainz_id}"}
+          >
+            {artist.name}
+          </.link>
+        </p>
+      </dd>
+    </div>
+    """
+  end
+
+  attr :title, :string, required: true
+  attr :count, :integer, required: true
+  attr :path, :string, required: true
+
+  defp counter(assigns) do
+    ~H"""
+    <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6">
+      <dt class="sm:mt-3">
+        <p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
+          {@title}
+        </p>
+      </dt>
+      <dd class="mt-1">
+        <.link
+          navigate={@path}
+          class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
+        >
+          {@count}
+        </.link>
+      </dd>
+    </div>
+    """
+  end
+
   def mount(_params, _session, socket) do
     latest_record = Collection.get_latest_record!()
     recent_tracks = LastFm.get_scrobbled_tracks()