Add home page stub, icons

This commit is contained in:
Harshad Sharma 2024-05-14 04:51:07 +05:30
parent d0524502bd
commit c935fbbc42
3 changed files with 195 additions and 8 deletions

View file

@ -60,18 +60,30 @@
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
<span class="icon mr-2">
<Lucideicons.bot aria-hidden="true" />
</span>
System
</.navbar_link>
<.navbar_dropdown>
<%!-- <.navbar_item>
<.link>Software Updates</.link>
</.navbar_item>
<.link href={~p"/updates"} class="navbar-item">
<span class="icon mr-2">
<Lucideicons.hard_drive_download aria-hidden="true" />
</span>
Software updates
</.link>
<.navbar_divider />
<.navbar_item>
<.link>Packages</.link>
</.navbar_item> --%>
<.link href={~p"/packages"} class="navbar-item">
<span class="icon mr-2">
<Lucideicons.package aria-hidden="true" />
</span>
Packages
</.link>
<.link href={~p"/services"} class="navbar-item">
<span class="icon mr-2">
<Lucideicons.puzzle aria-hidden="true" />
</span>
Services
</.link>
</.navbar_dropdown>
@ -79,20 +91,29 @@
<% end %>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
<span class="icon mr-2">
<Lucideicons.circle_user aria-hidden="true" />
</span>
Account
</.navbar_link>
<.navbar_dropdown>
<%= if @current_user do %>
<.link href={~p"/users/settings"} class="navbar-item">
<span class="icon mr-2">
<Lucideicons.user_cog aria-hidden="true" />
</span>
Settings
</.link>
<.link href={~p"/users/log_out"} method="delete" class="navbar-item">
<span class="icon mr-2">
<Lucideicons.log_out aria-hidden="true" />
</span>
Log out
</.link>
<% else %>
<.link href={~p"/users/log_in"} class="navbar-item">
Log in
<Lucideicons.log_in aria-hidden="true" /> Log in
</.link>
<% end %>
</.navbar_dropdown>

View file

@ -204,6 +204,28 @@ defmodule Liliform.Components do
"""
end
@doc """
Renders control.
"""
attr :class, :string, default: nil, doc: "the optional class of the control"
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the control"
slot :inner_block, required: true, doc: "the inner block that renders the control content"
def control(assigns) do
assigns =
assigns
|> extend_class("control")
|> set_phx_attributes()
|> set_bulma_classes()
~H"""
<p {@heex_class} {@heex_phx_attributes} {@rest}>
<%= render_slot(@inner_block) %>
</p>
"""
end
@doc """
Renders section.
"""
@ -864,6 +886,94 @@ defmodule Liliform.Components do
"""
end
@doc """
Renders a panel.
"""
attr :class, :string, default: nil, doc: "the optional class of the panel"
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel"
slot :inner_block, required: true, doc: "the inner block that renders the panel content"
def panel(assigns) do
assigns =
assigns
|> extend_class("panel")
|> set_phx_attributes()
|> set_bulma_classes()
~H"""
<article {@heex_class} {@heex_phx_attributes} {@rest}>
<%= render_slot(@inner_block) %>
</article>
"""
end
@doc """
Renders a panel-heading.
"""
attr :class, :string, default: nil, doc: "the optional class of the panel-heading"
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-heading"
slot :inner_block, required: true, doc: "the inner block that renders the panel-heading content"
def panel_heading(assigns) do
assigns =
assigns
|> extend_class("panel-heading")
|> set_phx_attributes()
|> set_bulma_classes()
~H"""
<p {@heex_class} {@heex_phx_attributes} {@rest}>
<%= render_slot(@inner_block) %>
</p>
"""
end
@doc """
Renders a panel-tabs.
"""
attr :class, :string, default: nil, doc: "the optional class of the panel-tabs"
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-tabs"
slot :inner_block, required: true, doc: "the inner block that renders the panel-tabs content"
def panel_tabs(assigns) do
assigns =
assigns
|> extend_class("panel-tabs")
|> set_phx_attributes()
|> set_bulma_classes()
~H"""
<p {@heex_class} {@heex_phx_attributes} {@rest}>
<%= render_slot(@inner_block) %>
</p>
"""
end
@doc """
Renders a panel-block.
"""
attr :class, :string, default: nil, doc: "the optional class of the panel-block"
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-block"
slot :inner_block, required: true, doc: "the inner block that renders the panel-block content"
def panel_block(assigns) do
assigns =
assigns
|> extend_class("panel-block")
|> set_phx_attributes()
|> set_bulma_classes()
~H"""
<div {@heex_class} {@heex_phx_attributes} {@rest}>
<%= render_slot(@inner_block) %>
</div>
"""
end
@doc """
Renders search input.
"""

View file

@ -4,12 +4,68 @@ defmodule FreediveWeb.HomeLive do
def render(assigns) do
~H"""
<.section>
<.title>Home</.title>
<.panel is-info>
<.panel_heading>Home</.panel_heading>
<.panel_tabs is-hidden-mobile>
<a class="is-active">All</a>
<a>Compute</a>
<a>Storage</a>
<a>Network</a>
<a>System</a>
</.panel_tabs>
<.panel_tabs is-hidden-tablet>
<a class="is-active"><Lucideicons.infinity aria-hidden="true" /></a>
<a><Lucideicons.binary aria-hidden="true" /></a>
<a><Lucideicons.hard_drive aria-hidden="true" /></a>
<a><Lucideicons.earth aria-hidden="true" /></a>
<a><Lucideicons.bot aria-hidden="true" /></a>
</.panel_tabs>
<.panel_block>
<.control has-icons-left>
<input
class="input is-info"
type="text"
placeholder="Search"
name="search"
value={@query}
/>
<span class="icon is-left">
<Lucideicons.search aria-hidden="true" />
</span>
</.control>
</.panel_block>
<.link patch={~p"/users/settings"} class="panel-block pt-1">
<span class="panel-icon">
<Lucideicons.user_cog aria-hidden="true" />
</span>
<span class="mt-2 ml-2">Account settings</span>
</.link>
<.link patch={~p"/services"} class="panel-block pt-1">
<span class="panel-icon">
<Lucideicons.puzzle aria-hidden="true" />
</span>
<div class="mt-2 ml-2">System services</div>
</.link>
<.link patch={~p"/packages"} class="panel-block pt-1">
<span class="panel-icon">
<Lucideicons.package aria-hidden="true" />
</span>
<span class="mt-2 ml-2">System packages</span>
</.link>
<.link patch={~p"/updates"} class="panel-block pt-1">
<span class="panel-icon">
<Lucideicons.hard_drive_download aria-hidden="true" />
</span>
<span class="mt-2 ml-2">System software updates</span>
</.link>
</.panel>
</.section>
"""
end
def mount(_params, _session, socket) do
socket = assign(socket, query: "")
{:ok, socket}
end
end