Toggling view modes

lib/wish_web/live/home_live/index.html.heex

@@ -1,26 +1,42 @@
 <.header>
   Listing Items
+  <:actions>
+    <.button phx-click="toggle">
+      Toggle Display
+    </.button>
+  </:actions>
 </.header>
 
-<div class="grid grid-cols-3" id="items" phx-update="stream">
-  <div
-    :for={{dom_id, item} <- @streams.items}
-    id={dom_id}
-    phx-click={JS.navigate(~p"/details/#{item}")}
+<div
+  class={
+    case @display do
+      :grid -> "grid grid-cols-3 gap-2"
+      :row -> ""
+    end
+  }
+  id="items-grid"
+>
+  <.link
+    :for={item <- @items}
+    navigate={~p"/details/#{item}"}
+    class={[
+      "p-2 rounded hover:bg-zinc-100 active:bg-zinc-200",
+      case @display do
+        :grid -> "h-72"
+        :row -> "flex flex-row h-24"
+      end
+    ]}
   >
-    <img :if={item.image_url} src={item.image_url} />
+    <div class="aspect-square flex flex-col justify-center">
+      <img
+        :if={item.image_url}
+        src={item.image_url}
+        alt={item.title}
+        height="224"
+        width="224"
+        class="rounded"
+      />
+    </div>
     <%= item.title %>
-  </div>
-</div>
-
-<div class="" id="items" phx-update="stream">
-  <div
-    :for={{dom_id, item} <- @streams.items}
-    id={dom_id}
-    phx-click={JS.navigate(~p"/details/#{item}")}
-    class="flex flex-row h-20"
-  >
-    <img :if={item.image_url} src={item.image_url} />
-    <%= item.title %>
-  </div>
+  </.link>
 </div>