Details page and stuff

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}>
-  <img src={@item.image_url} />
+<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
+  <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>