dotfiles/app/lib/prymn_web/components/layouts/app.html.heex

<header>
  <a
    href="#main"
    class="absolute left-0 -translate-y-full bg-black p-2 text-white transition-transform focus:transform-none"
  >
    <%= gettext("Skip to content") %>
  </a>
  <div class="flex items-stretch justify-between border-b border-zinc-300 bg-gray-100 px-4 text-sm sm:px-6 lg:px-8">
    <div class="my-auto leading-tight">
      <p class="text-[9px]">codename</p>
      <a href="/" class="text-lg font-medium">
        Prymn
      </a>
      <p class="inline text-xs">
        v<%= Application.spec(:prymn, :vsn) %>
      </p>
    </div>
    <div class="flex items-center border-r border-l border-zinc-300 text-zinc-900 hover:bg-white">
      <.link class="px-3 py-4" href={~p"/users/settings"}>
        <.icon name="hero-user" />
        <.icon name="hero-chevron-down" />
      </.link>
    </div>
  </div>
</header>
<main id="main" class="px-4 sm:px-6 lg:px-10">
  <div class="mb-8 border-b border-zinc-900 pt-10 pb-2 font-medium">
    <ul class="flex gap-4">
      <li>Projects</li>
      <li>Usage</li>
      <li>Activities</li>
      <li>Limits</li>
      <li>Support</li>
    </ul>
  </div>
  <div class="pb-20">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </div>
</main>