Move external links component to Core

lib/music_library_web/components/core_components.ex

@@ -136,6 +136,40 @@ defmodule MusicLibraryWeb.CoreComponents do
     """
   end
 
+  attr :external_links, :list, default: []
+
+  def external_links(assigns) do
+    ~H"""
+    <dt
+      :if={@external_links != []}
+      class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
+    >
+      {gettext("External links")}
+    </dt>
+    <dd class="mt-4 space-y-2">
+      <Fluxon.Components.Button.button
+        :for={external_link <- @external_links}
+        href={external_link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        variant="ghost"
+        size="sm"
+        class="ml-2 first:ml-0"
+      >
+        <img
+          class="mr-2"
+          src={favicon_url(external_link.url)}
+          alt={external_link.name}
+          loading="lazy"
+        />
+        <span class="text-sm font-medium text-zinc-900 dark:text-white">
+          {external_link.name}
+        </span>
+      </Fluxon.Components.Button.button>
+    </dd>
+    """
+  end
+
   def favicon_url(url) do
     uri = URI.parse(url)
     "https://www.google.com/s2/favicons?domain=#{uri.host}&sz=16"

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

@@ -173,33 +173,7 @@
             {render_bio(lastfm_artist_info.bio)}
           </.sheet>
         </.async_result>
-        <dt
-          :if={@external_links != []}
-          class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
-        >
-          {gettext("External links")}
-        </dt>
-        <dd class="mt-4 space-y-2">
-          <.button
-            :for={external_link <- @external_links}
-            href={external_link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            variant="ghost"
-            size="sm"
-            class="ml-2 first:ml-0"
-          >
-            <img
-              class="mr-2"
-              src={favicon_url(external_link.url)}
-              alt={external_link.name}
-              loading="lazy"
-            />
-            <span class="text-sm font-medium text-zinc-900 dark:text-white">
-              {external_link.name}
-            </span>
-          </.button>
-        </dd>
+        <.external_links external_links={@external_links} />
       </div>
       <div class="md:col-span-7 md:order-1">
         <.record_grid

priv/gettext/default.pot

@@ -1469,7 +1469,7 @@ msgstr ""
 msgid "You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex
+#: lib/music_library_web/components/core_components.ex
 #, elixir-autogen, elixir-format
 msgid "External links"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -1469,7 +1469,7 @@ msgstr ""
 msgid "You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex
+#: lib/music_library_web/components/core_components.ex
 #, elixir-autogen, elixir-format
 msgid "External links"
 msgstr ""