Show similar artists on a grid

lib/music_library_web/live/artist_live/show.ex

@@ -44,6 +44,51 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     """
   end
 
+  attr :title, :string, required: true
+  attr :artists, :list, required: true
+
+  defp artist_grid(assigns) do
+    ~H"""
+    <div class="mt-4">
+      <header class="flex items-baseline justify-start">
+        <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+          {@title}
+        </h2>
+      </header>
+      <ul
+        role="list"
+        class="mt-4 grid grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-4 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8"
+      >
+        <li :for={artist <- @artists} class="relative">
+          <div class="group overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
+            <div class="relative">
+              <img
+                src={~p"/artists/#{artist.musicbrainz_id}/image"}
+                alt={artist.name}
+                class="pointer-events-none aspect-square object-cover group-hover:opacity-75"
+                onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+              />
+            </div>
+            <button
+              type="button"
+              class="absolute inset-0 focus:outline-hidden"
+              phx-click={
+                JS.patch(~p"/artists/#{artist.musicbrainz_id}")
+                |> JS.dispatch("music_library:scroll_top")
+              }
+            >
+              <span class="sr-only">{gettext("View details")}</span>
+            </button>
+          </div>
+          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
+            {artist.name}
+          </p>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+
   @impl true
   def mount(_params, _session, socket) do
     {:ok, socket}

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

@@ -224,6 +224,26 @@
         records_count={@wishlist_records_count}
         record_path={fn record -> ~p"/wishlist/#{record}" end}
       />
+
+      <.async_result :let={similar_artists} assign={@similar_artists}>
+        <:loading>
+          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+            {gettext("Loading similar artists")}
+          </div>
+        </:loading>
+        <:failed :let={_failure}>
+          <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+            <.icon
+              name="hero-exclamation-triangle"
+              class="-mt-1 mr-1 h-5 w-5"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Error loading similar artists")}
+          </div>
+        </:failed>
+        <.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
+      </.async_result>
     </div>
   </div>
 </div>

priv/gettext/default.pot

@@ -356,6 +356,7 @@ msgid "Made by"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -356,6 +356,7 @@ msgid "Made by"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""