Extract json_viewer component

lib/music_library_web/components/core_components.ex

@@ -182,6 +182,18 @@ defmodule MusicLibraryWeb.CoreComponents do
     """
   end
 
+  attr :title, :string, required: true
+  attr :data, :map, required: true
+
+  def json_viewer(assigns) do
+    ~H"""
+    <details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
+      <summary class="text-xs sm:text-sm cursor-pointer">{@title}</summary>
+      <pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@data, pretty: true) %></code></pre>
+    </details>
+    """
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do

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

@@ -268,11 +268,8 @@
     </div>
   </div>
 </div>
-<!-- TODO: extract to a component -->
-<details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
-  <summary class="text-xs sm:text-sm cursor-pointer">{gettext("MusicBrainz data")}</summary>
-  <pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@record.musicbrainz_data, pretty: true) %></code></pre>
-</details>
+
+<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
 
 <.live_component
   id="release-with-tracks"

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

@@ -270,11 +270,8 @@
     </div>
   </div>
 </div>
-<!-- TODO: extract to a component -->
-<details class="mt-4 px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
-  <summary class="text-xs sm:text-sm cursor-pointer">{gettext("MusicBrainz data")}</summary>
-  <pre><code class="text-xs sm:text-sm"><%= Jason.encode!(@record.musicbrainz_data, pretty: true) %></code></pre>
-</details>
+
+<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
 
 <.modal
   :if={@live_action == :edit}