Extract stats album preview component

lib/music_library_web/live/stats_live/data_components.ex

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

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

@@ -3,35 +3,11 @@
     <%= gettext("Basics") %>
   </h1>
   <dl class="mt-5 grid grid-cols-2 gap-5 sm:grid-cols-5">
-    <div
+    <.album_preview
-      class="relative overflow-hidden rounded-md bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 col-span-2 sm:col-span-3 cursor-pointer"
+      record={@latest_record}
-      phx-click={JS.navigate(~p"/records/#{@latest_record}")}
+      title={gettext("Latest purchase")}
-    >
+      class="col-span-2 sm:col-span-3"
-      <dt>
+    />
-        <img
-          class="absolute w-20 rounded-md shadow"
-          src={~p"/covers/#{@latest_record.id}"}
-          alt={@latest_record.title}
-        />
-        <p class="ml-24 truncate text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">
-          <%= gettext("Latest purchase") %>
-        </p>
-      </dt>
-      <dd class="ml-24 flex items-baseline pb-6 sm:pb-7">
-        <p class="font-semibold">
-          <.link
-            :for={artist <- @latest_record.artists}
-            class="text-sm md:text-base lg:text-2xl text-gray-900 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
-            patch={~p"/records?query=mbid:#{artist.musicbrainz_id}"}
-          >
-            <%= artist.name %>
-          </.link>
-          <span class="text-sm md:text-base block text-gray-600 dark:text-gray-200">
-            <%= @latest_record.title %>
-          </span>
-        </p>
-      </dd>
-    </div>
     <.counter title={gettext("Total collection")} count={@collection_count} path={~p"/records"} />
     <.counter title={gettext("Total wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
   </dl>

priv/gettext/default.pot

@@ -97,7 +97,7 @@ msgstr ""
 msgid "Format"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex:42
+#: lib/music_library_web/live/stats_live/index.html.heex:18
 #, elixir-autogen, elixir-format
 msgid "Formats"
 msgstr ""
@@ -136,7 +136,7 @@ msgstr ""
 msgid "Invalid password"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex:17
+#: lib/music_library_web/live/stats_live/index.html.heex:8
 #, elixir-autogen, elixir-format
 msgid "Latest purchase"
 msgstr ""
@@ -287,12 +287,12 @@ msgstr ""
 msgid "The application has been updated, please reload."
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex:35
+#: lib/music_library_web/live/stats_live/index.html.heex:11
 #, elixir-autogen, elixir-format
 msgid "Total collection"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex:36
+#: lib/music_library_web/live/stats_live/index.html.heex:12
 #, elixir-autogen, elixir-format
 msgid "Total wishlist"
 msgstr ""
@@ -302,7 +302,7 @@ msgstr ""
 msgid "Type"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/index.html.heex:46
+#: lib/music_library_web/live/stats_live/index.html.heex:22
 #, elixir-autogen, elixir-format
 msgid "Types"
 msgstr ""