Details page and stuff

lib/wish_web/components/layouts/app.html.heex

@@ -8,7 +8,7 @@
     <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>
   </div>
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<main class="px-4 py-10 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
     <.flash_group flash={@flash} />
     <%= @inner_content %>

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

@@ -1,14 +1,55 @@
 <.link navigate={~p"/"}>
   <.icon name="hero-arrow-left" /> Back to list
 </.link>
-<.header>
-  <%= @item.title %>
-</.header>
 
-<div :if={@item.image_url}>
+<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
-  <img src={@item.image_url} />
+  <div :if={@item.image_url} class="relative">
+    <img src={@item.image_url} />
+    <%= if @item.received && !@current_user do %>
+      <div class="absolute bg-red-400 text-white w-full h-7 bottom-0">
+        <.icon name="hero-check-circle" />Received
+      </div>
+    <% end %>
+  </div>
+  <div class="flex flex-col gap-4">
+    <.header>
+      <%= @item.title %>
+    </.header>
+
+    <div>
+      <div class="text-sm opacity-60">
+        Priority:
+      </div>
+      <span>
+        <%= for _ <- 1..@item.desire do %>
+          <.icon name="hero-star" class="bg-red-500 text-red-500" />
+        <% end %>
+      </span>
+    </div>
+
+    <%= if @item.description do %>
+      <div>
+        <div class="text-sm opacity-60">
+          Description:
+        </div>
+        <div>
+          <%= @item.description %>
+        </div>
+      </div>
+    <% end %>
+
+    <.button>
+      <.link class="block h-full w-full" href={@item.url} target="_blank">
+        Go to seller <.icon name="hero-arrow-right" />
+      </.link>
+    </.button>
+
+    <.button phx-click={JS.push("toggle_received", value: %{"id" => @item.id})}>
+      <%= if !@item.received do %>
+        Mark as purchased
+      <% else %>
+        Unmark as purchased
+      <% end %>
+    </.button>
+  </div>
 </div>
-
-<.button phx-click={JS.push("toggle_received", value: %{"id" => @item.id})}>
-  Toggle Received
-</.button>

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

@@ -5,7 +5,7 @@
       JS.push("toggle_view_state")
       |> JS.dispatch("toggle_view_state", detail: %{"grid" => !@grid})
     }>
-      Toggle Display
+      Toggle List/Grid
     </.button>
   </:actions>
 </.header>
@@ -37,12 +37,22 @@
       <div class="flex flex-row justify-between mt-1 font-display">
         <%= item.title %>
         <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
-          <div class="w-7 h-7 rounded-full hover:bg-purple-300 active:bg-purple-400">
+          <div class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500">
             <.icon name="hero-ellipsis-vertical" class="w-full h-full" />
           </div>
           <.dropdown item={item} />
         </div>
       </div>
+      <div>
+        <div class="text-sm opacity-60">
+          Priority:
+        </div>
+        <span>
+          <%= for _ <- 1..item.desire do %>
+            <.icon name="hero-star" class="bg-red-500 text-red-500" />
+          <% end %>
+        </span>
+      </div>
       <div class="text-sm text-zinc-500">
         <%= item.description %>
       </div>
@@ -69,12 +79,25 @@
         <%= item.title %>
       </div>
       <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
-        <.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
+        <.icon
+          name="hero-ellipsis-vertical"
+          class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
+        />
         <.dropdown item={item} />
       </div>
-      <div class="col-span-3 row-span-2 w-full text-zinc-500">
+      <div class="col-span-3 w-full text-zinc-500">
         <%= item.description %>
       </div>
+      <div class="col-span-3">
+        <div class="text-sm opacity-60">
+          Priority:
+        </div>
+        <span>
+          <%= for _ <- 1..item.desire do %>
+            <.icon name="hero-star" class="bg-red-500 text-red-500" />
+          <% end %>
+        </span>
+      </div>
     </div>
   </div>
 <% end %>