diff options
| author | Saumit <justsaumit@protonmail.com> | 2025-09-27 02:14:26 +0530 |
|---|---|---|
| committer | Saumit <justsaumit@protonmail.com> | 2025-09-27 02:14:26 +0530 |
| commit | 82e03978b89938219958032efb1448cc76baa181 (patch) | |
| tree | 626f3e54d52ecd49be0ed3bee30abacc0453d081 /src/flagd-ui/lib/flagd_ui_web/components/layouts.ex | |
Initial snapshot - OpenTelemetry demo 2.1.3 -f
Diffstat (limited to 'src/flagd-ui/lib/flagd_ui_web/components/layouts.ex')
| -rw-r--r-- | src/flagd-ui/lib/flagd_ui_web/components/layouts.ex | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/src/flagd-ui/lib/flagd_ui_web/components/layouts.ex b/src/flagd-ui/lib/flagd_ui_web/components/layouts.ex new file mode 100644 index 0000000..164da11 --- /dev/null +++ b/src/flagd-ui/lib/flagd_ui_web/components/layouts.ex @@ -0,0 +1,111 @@ +# Copyright The OpenTelemetry Authors +# SPDX-License-Identifier: Apache-2.0 + +defmodule FlagdUiWeb.Layouts do + @moduledoc """ + This module holds different layouts used by your application. + + See the `layouts` directory for all templates available. + The "root" layout is a skeleton rendered as part of the + application router. The "app" layout is rendered as component + in regular views and live views. + """ + use FlagdUiWeb, :html + + embed_templates "layouts/*" + + def app(assigns) do + ~H""" + <header class="navbar px-4 sm:px-6 lg:px-8"> + <div class="flex-1"> + <a href="/" class="flex-1 flex items-center gap-2"> + <span class="text-lg font-semibold">Flagd UI</span> + </a> + </div> + <div class="flex-none"> + <ul class="flex flex-column px-1 space-x-4 items-center"> + <li> + <.theme_toggle /> + </li> + </ul> + </div> + </header> + + <main class="px-4 py-20 sm:px-6 lg:px-8"> + <div class="mx-auto max-w-2xl space-y-4"> + {render_slot(@inner_block)} + </div> + </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")} + phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})} + hidden + > + {gettext("Attempting to reconnect")} + <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 motion-safe:animate-spin" /> + </.flash> + + <.flash + id="server-error" + kind={:error} + title={gettext("Something went wrong!")} + phx-disconnected={show(".phx-client-error #client-error") |> JS.remove_attribute("hidden")} + phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})} + hidden + > + {gettext("Hang in there while we get back on track")} + <.icon name="hero-arrow-path" class="ml-1 h-3 w-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-[33%] h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-[33%] [[data-theme=dark]_&]:left-[66%] transition-[left]" /> + + <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "system"})} class="flex p-2"> + <.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" /> + </button> + + <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "light"})} class="flex p-2"> + <.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" /> + </button> + + <button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "dark"})} class="flex p-2"> + <.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" /> + </button> + </div> + """ + end +end |