update

lib/zoeyscomputer_web/live/image_live/index.html.heex

@@ -0,0 +1,56 @@
+<.header>
+  Listing Images
+  <:actions>
+    <.link patch={~p"/images/new"}>
+      <.button>New Image</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<%!-- <.table --%>
+<%!--   id="images" --%>
+<%!--   rows={@streams.images} --%>
+<%!--   row_click={fn {_id, image} -> JS.navigate(~p"/images/#{image.file}") end} --%>
+<%!-- > --%>
+<%!--   <:col :let={{_id, image}} label="File"><%= image.file %></:col> --%>
+<%!--   <:action :let={{_id, image}}> --%>
+<%!--     <div class="sr-only"> --%>
+<%!--       <.link navigate={~p"/images/#{image.file}"}>Show</.link> --%>
+<%!--     </div> --%>
+<%!--     <.link patch={~p"/images/#{image}/edit"}>Edit</.link> --%>
+<%!--   </:action> --%>
+<%!--   <:action :let={{id, image}}> --%>
+<%!--     <.link --%>
+<%!--       phx-click={JS.push("delete", value: %{id: image.id}) |> hide("##{id}")} --%>
+<%!--       data-confirm="Are you sure?" --%>
+<%!--     > --%>
+<%!--       Delete --%>
+<%!--     </.link> --%>
+<%!--   </:action> --%>
+<%!-- </.table> --%>
+
+<div class="grid grid-cols-3 gap-4">
+  <img
+    :for={{dom_id, image} <- @streams.images}
+    src={"https://s3.zoeys.computer/imgs/uploads/#{image.file}.png"}
+    phx-click={JS.navigate(~p"/images/#{image.file}")}
+    class="cursor-pointer hover:shadow-lg transition duration-300 hover:scale-105 rounded-lg ease-out border-2 border-ctp-base hover:border-ctp-mauve"
+    id={dom_id}
+  />
+</div>
+
+<.modal
+  :if={@live_action in [:new, :edit]}
+  id="image-modal"
+  show
+  on_cancel={JS.patch(~p"/images")}
+>
+  <.live_component
+    module={ZoeyscomputerWeb.ImageLive.FormComponent}
+    id={@image.id || :new}
+    title={@page_title}
+    action={@live_action}
+    image={@image}
+    patch={~p"/images"}
+  />
+</.modal>