forked from hiway/freedive
82 lines
2.2 KiB
Elixir
82 lines
2.2 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="is-size-5">
|
|
<%= 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.icon}
|
|
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"
|
|
/>
|
|
<.icon for="search" size="1.5rem" aria-hidden="true" is-left />
|
|
</.control>
|
|
</.panel_block>
|
|
<%= render_slot(@inner_block) %>
|
|
</.panel>
|
|
</.block>
|
|
"""
|
|
end
|
|
end
|