Extract artist_links/1 component

lib/music_library_web/components/record_components.ex

@@ -5,6 +5,25 @@ defmodule MusicLibraryWeb.RecordComponents do
   alias MusicLibrary.Records
   alias Phoenix.LiveView.JS
 
+  attr :artists, :list, required: true
+  attr :joinphrase_class, :string, default: nil
+
+  def artist_links(assigns) do
+    ~H"""
+    <span :for={artist <- @artists}>
+      <.link
+        class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+        navigate={~p"/artists/#{artist.musicbrainz_id}"}
+      >
+        {artist.name}
+      </.link>
+      <span class={[@joinphrase_class, "leading-5 text-zinc-400 dark:text-zinc-300"]}>
+        {artist.joinphrase}
+      </span>
+    </span>
+    """
+  end
+
   attr :record_show_path, :any, required: true
   attr :record_edit_path, :any, required: true
   attr :records, :list, required: true
@@ -46,17 +65,7 @@ defmodule MusicLibraryWeb.RecordComponents do
           </div>
           <div class="min-w-0 flex-auto">
             <h1 class="text-sm leading-6 text-zinc-700">
-              <span :for={artist <- record.artists}>
+              <.artist_links joinphrase_class="text-xs" artists={record.artists} />
-                <.link
-                  class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-                  navigate={~p"/artists/#{artist.musicbrainz_id}"}
-                >
-                  {artist.name}
-                </.link>
-                <span class="text-xs leading-5 text-zinc-500 dark:text-zinc-400">
-                  {artist.joinphrase}
-                </span>
-              </span>
             </h1>
             <h2 class="mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
               {record.title}

lib/music_library_web/live/collection_live/show.ex

@@ -7,7 +7,8 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
     only: [
       format_label: 1,
       type_label: 1,
-      release_summary: 1
+      release_summary: 1,
+      artist_links: 1
     ]
 
   alias MusicLibrary.{Records, ScrobbleActivity}

lib/music_library_web/live/collection_live/show.html.heex

@@ -11,17 +11,7 @@
     <div class="mt-4 md:mt-0 flex justify-between">
       <div>
         <h1 class="text-base font-medium leading-6 text-zinc-700">
-          <span :for={artist <- @record.artists}>
+          <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
-            <.link
-              class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-              navigate={~p"/artists/#{artist.musicbrainz_id}"}
-            >
-              {artist.name}
-            </.link>
-            <span class="text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-              {artist.joinphrase}
-            </span>
-          </span>
         </h1>
         <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
           {@record.title}

lib/music_library_web/live/wishlist_live/show.ex

@@ -5,7 +5,8 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
     only: [
       format_label: 1,
       type_label: 1,
-      release_summary: 1
+      release_summary: 1,
+      artist_links: 1
     ]
 
   alias MusicLibrary.Records

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -11,17 +11,7 @@
     <div class="mt-4 md:mt-0 flex justify-between">
       <div>
         <h1 class="text-base font-medium leading-6 text-zinc-700">
-          <span :for={artist <- @record.artists}>
+          <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
-            <.link
-              class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-              navigate={~p"/artists/#{artist.musicbrainz_id}"}
-            >
-              {artist.name}
-            </.link>
-            <span class="text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-              {artist.joinphrase}
-            </span>
-          </span>
         </h1>
         <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
           {@record.title}