Display artist image in full when clicking on it

lib/music_library_web/components/artist_components.ex

@@ -7,6 +7,7 @@ defmodule MusicLibraryWeb.ArtistComponents do
   attr :image_hash, :string, required: true
   attr :class, :string, required: false, default: nil
   attr :width, :integer, default: nil
+  attr :rest, :global
 
   def artist_image(assigns) do
     payload =
@@ -21,6 +22,7 @@ defmodule MusicLibraryWeb.ArtistComponents do
       src={~p"/assets/#{@payload}"}
       alt={@artist.name}
       onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+      {@rest}
     />
     """
   end

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

@@ -112,10 +112,23 @@
           {gettext("Meta")}
         </h2>
         <.artist_image
-          class="w-full rounded-md shadow-sm mt-4"
+          class="w-full rounded-md shadow-sm mt-4 cursor-pointer"
           artist={@artist}
           image_hash={@artist_info.image_data_hash}
+          phx-click={Fluxon.open_dialog("artist-image-modal")}
         />
+        <.modal
+          id="artist-image-modal"
+          class="mx-auto sm:min-w-2xl max-w-sm md:max-w-3xl lg:max-w-5xl mt-8"
+          placement="center"
+          open={false}
+        >
+          <.artist_image
+            class="w-full rounded-md shadow-sm mt-8"
+            artist={@artist}
+            image_hash={@artist_info.image_data_hash}
+          />
+        </.modal>
         <dl>
           <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
             {gettext("MusicBrainz ID")}