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

<.header>
  Daniel's Wishlist
  <:actions>
    <.button phx-click={
      JS.push("toggle_view_state")
      |> JS.dispatch("toggle_view_state", detail: %{"grid" => !@grid})
    }>
      <%= if @grid do %>
        List View
      <% else %>
        Grid View
      <% end %>
    </.button>
  </:actions>
  <:actions :if={!@current_user}>
    <.button phx-click={JS.push("toggle_hidden_items")}>
      <%= if @hidden do %>
        Hide
      <% else %>
        Show
      <% end %>
      Received
    </.button>
  </:actions>
</.header>

<%= if @grid do %>
  <div class="grid grid-cols-3 gap-4 mt-4" id="items-grid">
    <div
      :for={item <- @items}
      phx-click={JS.navigate(~p"/details/#{item}")}
      class="p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
            cursor-pointer"
    >
      <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
        <img
          :if={item.image_url}
          src={item.image_url}
          alt={item.title}
          height="224"
          width="224"
          class="rounded"
        />
        <%= if item.received && !@current_user do %>
          <div class="bg-red-400 text-white absolute w-full h-7 bottom-0">
            <.icon name="hero-check-circle" />Received
          </div>
        <% end %>
      </div>
      <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-400 active:bg-purple-500">
            <.icon name="hero-ellipsis-vertical" class="w-full h-full" />
          </div>
          <.dropdown item={item} />
        </div>
      </div>
      <%= if item.price do %>
        <div>
          <div class="text-sm opacity-60">
            Price:
          </div>
          <div class="text-sm">
            ~£<%= item.price %>
          </div>
        </div>
      <% end %>
      <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 %>
    </div>
  </div>
<% else %>
  <div class="flex flex-col mt-4 space-y-4">
    <div
      :for={item <- @items}
      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
            cursor-pointer"
      phx-click={JS.navigate(~p"/details/#{item}")}
    >
      <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
        <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
        <%= if item.received && !@current_user do %>
          <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
            <.icon name="hero-check-circle" />Purchased
          </div>
        <% end %>
      </div>
      <div class="col-span-3 text-lg font-display">
        <%= item.title %>
      </div>
      <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
        <.icon
          name="hero-ellipsis-vertical"
          class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
        />
        <.dropdown item={item} />
      </div>
      <%= if item.price do %>
        <div class="col-span-3">
          <div class="text-sm opacity-60">
            Price:
          </div>
          <div class="text-sm">
            ~£<%= item.price %>
          </div>
        </div>
      <% end %>
      <%= if item.description do %>
        <div class="col-span-3 w-full">
          <div class="text-sm opacity-60">
            Description:
          </div>
          <div>
            <%= item.description %>
          </div>
        </div>
      <% end %>
      <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 %>