freedive/lib/freedive_web/live/home_live.ex

defmodule FreediveWeb.HomeLive do
  use FreediveWeb, :live_view
  import Freedive.Colorhash

  def render(assigns) do
    ~H"""
    <.section>
      <.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 style={"color: #{hsl("all", css: true)}"} aria-hidden="true" />
          </a>
          <a>
            <Lucideicons.binary style={"color: #{hsl("compute", css: true)}"} aria-hidden="true" />
          </a>
          <a>
            <Lucideicons.hard_drive style={"color: #{hsl("storage", css: true)}"} aria-hidden="true" />
          </a>
          <a>
            <Lucideicons.earth style={"color: #{hsl("network", css: true)}"} aria-hidden="true" />
          </a>
          <a><Lucideicons.bot style={"color: #{hsl("system", css: true)}"} 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
              style={"color: #{hsl("account settings", css: true)}"}
              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
              style={"color: #{hsl("system services", css: true)}"}
              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
              style={"color: #{hsl("system packages", css: true)}"}
              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
              style={"color: #{hsl("system software updates", css: true)}"}
              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