freedive/lib/freedive_web/live/home_live.ex

defmodule FreediveWeb.HomeLive do
  use FreediveWeb, :live_view

  def render(assigns) do
    ~H"""
    <.block class="px-2 py-4">
      <.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 title="All" is-active>
            <.icon for="all" color="auto" />
          </a>
          <a title="Compute">
            <.icon for="compute" color="auto" />
          </a>
          <a title="Storage">
            <.icon for="storage" color="auto" />
          </a>
          <a title="Network">
            <.icon for="network" color="auto" />
          </a>
          <a title="System">
            <.icon for="system" color="auto" />
          </a>
        </.panel_tabs>

        <.panel_block>
          <.control has-icons-left>
            <input
              class="input is-info"
              type="text"
              placeholder="Search"
              name="search"
              value={@query}
            />
            <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
          </.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>
    </.block>
    <.section>
      <.box>
        <.button phx-click="color" phx-value-enable="true">
          Color
        </.button>
        <.button phx-click="color" phx-value-enable="false">
          Grayscale
        </.button>
      </.box>
    </.section>
    """
  end

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

  def handle_event("color", %{"enable" => "true"}, socket) do
    Freedive.Features.enable(:colorhash)
    {:noreply, assign(socket, query: "color")}
  end

  def handle_event("color", %{"enable" => "false"}, socket) do
    Freedive.Features.disable(:colorhash)
    {:noreply, assign(socket, query: "grayscale")}
  end
end