43 lines
786 B
Plaintext
43 lines
786 B
Plaintext
<.header>
|
|
Listing Items
|
|
<:actions>
|
|
<.button phx-click="toggle">
|
|
Toggle Display
|
|
</.button>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<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
|
|
]}
|
|
>
|
|
<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 %>
|
|
</.link>
|
|
</div>
|