freedive/lib/freedive_web/live/home_live.ex

defmodule FreediveWeb.HomeLive do
  use FreediveWeb, :live_view

  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" title="All">
            <.icon for="infinity" color="auto" />
          </a>
          <a title="Compute">
            <.icon for="binary" color="auto" />
          </a>
          <a title="Storage">
            <.icon for="hard-drive" color="auto" />
          </a>
          <a title="Network">
            <.icon for="earth" color="auto" />
          </a>
          <a title="System">
            <.icon for="bot" color="auto" />
          </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"/services"} class="panel-block pt-1">
          <span class="panel-icon">
            <.icon for="puzzle" color="auto" aria-hidden="true" />
          </span>
          <div class="mt-2 ml-2">Services</div>
        </.link>
        <.link patch={~p"/packages"} class="panel-block pt-1">
          <span class="panel-icon">
            <.icon for="package" color="auto" aria-hidden="true" />
          </span>
          <span class="mt-2 ml-2">Packages</span>
        </.link>
        <.link patch={~p"/updates"} class="panel-block pt-1">
          <span class="panel-icon">
            <.icon for="hard-drive-download" color="auto" aria-hidden="true" />
          </span>
          <span class="mt-2 ml-2">Software updates</span>
        </.link>
      </.panel>
    </.section>
    """
  end

  def mount(_params, _session, socket) do
    socket = assign(socket, query: "")
    {:ok, socket}
  end
end