dexi/lib/dexi_web/components/layouts.ex

defmodule DexiWeb.Layouts do
  @moduledoc """
  This module holds layouts and related functionality
  used by your application.
  """
  use DexiWeb, :html

  # Embed all files in layouts/* within this module.
  # The default root.html.heex file contains the HTML
  # skeleton of your application, namely HTML headers
  # and other static content.
  embed_templates "layouts/*"

  @doc """
  Renders your app layout.

  This function is typically invoked from every template,
  and it often contains your application menu, sidebar,
  or similar.

  ## Examples

      <Layouts.app flash={@flash}>
        <h1>Content</h1>
      </Layouts.app>

  """
  attr :flash, :map, required: true, doc: "the map of flash messages"

  attr :current_scope, :map,
    default: nil,
    doc: "the current [scope](https://phoenix.hexdocs.pm/scopes.html)"

  slot :inner_block, required: true

  def app(assigns) do
    ~H"""
    <header class={[
      "border-b border-muted-steel bg-deep-slate/95 px-5 backdrop-blur"
    ]}>
      <nav
        class={["mx-auto flex h-16 max-w-6xl items-center justify-between"]}
        aria-label="Main navigation"
      >
        <.link
          navigate={~p"/"}
          class={["text-lg font-black tracking-[-0.04em] text-cool-white"]}
        >
          Dexi
        </.link>
        <div class={["flex items-center gap-2"]}>
          <%= if @current_scope && @current_scope.user do %>
            <.link
              :if={@current_scope.user.role == :admin}
              navigate={~p"/admin/users"}
              class={[
                "rounded-full px-4 py-2 text-sm font-semibold text-cool-white transition hover:bg-soft-violet/15"
              ]}
            >
              Users
            </.link>
            <.link
              navigate={~p"/account"}
              class={[
                "rounded-full px-4 py-2 text-sm font-semibold text-cool-white transition hover:bg-soft-violet/15"
              ]}
            >
              Account
            </.link>
            <.link
              href={~p"/logout"}
              method="delete"
              class={[
                "rounded-full border border-muted-steel px-4 py-2 text-sm font-semibold text-cool-white transition hover:border-muted-steel hover:bg-electric-cyan hover:text-midnight"
              ]}
            >
              Log out
            </.link>
          <% else %>
            <.link
              navigate={~p"/login"}
              class={[
                "rounded-full bg-electric-cyan px-5 py-2 text-sm font-bold text-midnight transition hover:-translate-y-0.5 hover:bg-bright-cyan"
              ]}
            >
              Log in
            </.link>
          <% end %>
        </div>
      </nav>
    </header>

    <main class={[
      "min-h-[calc(100vh-4rem)] bg-midnight text-cool-white"
    ]}>
      {render_slot(@inner_block)}
    </main>

    <.flash_group flash={@flash} />
    """
  end

  @doc """
  Shows the flash group with standard titles and content.

  ## Examples

      <.flash_group flash={@flash} />
  """
  attr :flash, :map, required: true, doc: "the map of flash messages"
  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"

  def flash_group(assigns) do
    ~H"""
    <div id={@id} aria-live="polite">
      <.flash kind={:info} flash={@flash} />
      <.flash kind={:error} flash={@flash} />

      <.flash
        id="client-error"
        kind={:error}
        title={gettext("We can't find the internet")}
        phx-disconnected={
          show(".phx-client-error #client-error")
          |> JS.remove_attribute("hidden", to: ".phx-client-error #client-error")
        }
        phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})}
        hidden
      >
        {gettext("Attempting to reconnect")}
        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
      </.flash>

      <.flash
        id="server-error"
        kind={:error}
        title={gettext("Something went wrong!")}
        phx-disconnected={
          show(".phx-server-error #server-error")
          |> JS.remove_attribute("hidden", to: ".phx-server-error #server-error")
        }
        phx-connected={hide("#server-error") |> JS.set_attribute({"hidden", ""})}
        hidden
      >
        {gettext("Attempting to reconnect")}
        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
      </.flash>
    </div>
    """
  end

  @doc """
  Provides dark vs light theme toggle based on themes defined in app.css.

  See <head> in root.html.heex which applies the theme before page load.
  """
  def theme_toggle(assigns) do
    ~H"""
    <div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
      <div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 [[data-theme-source=system]_&]:!left-0 transition-[left]" />

      <button
        class="flex p-2 cursor-pointer w-1/3"
        phx-click={JS.dispatch("phx:set-theme")}
        data-phx-theme="system"
      >
        <.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button
        class="flex p-2 cursor-pointer w-1/3"
        phx-click={JS.dispatch("phx:set-theme")}
        data-phx-theme="light"
      >
        <.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>

      <button
        class="flex p-2 cursor-pointer w-1/3"
        phx-click={JS.dispatch("phx:set-theme")}
        data-phx-theme="dark"
      >
        <.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>
    </div>
    """
  end
end