freedive/lib/liliform/page.ex

83 lines
2.3 KiB
Elixir

defmodule Liliform.Page do
use Liliform.Component
import Liliform.Block
import Liliform.Icon
import Liliform.Panel
import Liliform.Control
@doc """
Renders a panel as page.
"""
attr :name, :string, required: true, doc: "page name"
attr :class, :string, default: "", doc: "additional classes"
attr :filters, :list, default: [], doc: "filters"
attr :details, :string, default: nil, doc: "details"
attr :query, :string, default: "", doc: "search query"
attr :rest, :global
slot :inner_block, required: true
def page(assigns) do
assigns =
assigns
|> set_bulma_classes()
~H"""
<.block class="px-2 py-4">
<.panel class={@class} {@rest} is-info>
<.panel_heading>
<%= @name %>
</.panel_heading>
<%= if @details == nil do %>
<.panel_tabs is-hidden-mobile>
<%= for filter <- @filters do %>
<a
class={if filter.active, do: "is-active"}
phx-click="filter"
phx-value-key={filter.key}
>
<span class="">
<%= filter.title %>
</span>
</a>
<% end %>
</.panel_tabs>
<.panel_tabs is-hidden-tablet>
<%= for filter <- @filters do %>
<a
title={filter.title}
class={if filter.active, do: "is-active"}
phx-click="filter"
phx-value-key={filter.key}
>
<.icon_raw
for={filter.title}
size="2rem"
color={if filter.active, do: "gray", else: "auto"}
/>
</a>
<% end %>
</.panel_tabs>
<% end %>
<.panel_block>
<.control has-icons-left>
<input
class="input is-info"
type="text"
placeholder="Search"
name="search"
value={@query}
phx-keyup="search"
autofocus
/>
<.icon for="search" size="1.5rem" aria-hidden="true" is-left />
</.control>
</.panel_block>
<%= render_slot(@inner_block) %>
</.panel>
</.block>
"""
end
end