chronoscope/lib/chronoscope_web/components/layouts/app.html.heex

<header class="px-4 sm:px-6 lg:px-8">
  <div class="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-700 py-3 text-sm">
    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900 dark:text-zinc-300 pe-4">
      <a href="/" class="hover:text-zinc-700 dark:hover:text-zinc-400">
        Chronoscope
      </a>
      <p class="bg-brand/10 dark:bg-brand text-brand dark:text-zinc-900 rounded-full px-2 font-medium leading-6">
        v<%= Application.spec(:chronoscope, :vsn) %>
      </p>
    </div>
    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900 dark:text-zinc-300">
      <a href="https://codeberg.org/mike-cifelli" class="hover:text-zinc-700 dark:hover:text-zinc-400">
        Codeberg
      </a>
      <a href="/add" class="rounded-lg bg-zinc-200 dark:bg-zinc-600 px-2 py-1 hover:bg-zinc-300/80 dark:hover:bg-zinc-500/80 whitespace-nowrap">
        Add a Server <span aria-hidden="true">&rarr;</span>
      </a>
    </div>
  </div>
</header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-fit">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </div>
</main>