From c09438fe5e67aeaec40d2d5a38fadf234d6eb639 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 24 May 2025 09:39:12 +0100
Subject: [PATCH] Extract json_viewer component

---
 lib/music_library_web/components/core_components.ex  | 12 ++++++++++++
 .../live/collection_live/show.html.heex              |  7 ++-----
 .../live/wishlist_live/show.html.heex                |  7 ++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index de2f3ae3..4990aff6 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/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
diff --git a/lib/music_library_web/live/collection_live/show.html.heex b/lib/music_library_web/live/collection_live/show.html.heex
index 3d527e44..746ba5c3 100644
--- a/lib/music_library_web/live/collection_live/show.html.heex
+++ b/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"
diff --git a/lib/music_library_web/live/wishlist_live/show.html.heex b/lib/music_library_web/live/wishlist_live/show.html.heex
index 95850c20..87344a97 100644
--- a/lib/music_library_web/live/wishlist_live/show.html.heex
+++ b/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}