<header class="px-4 sm:px-6 lg:px-8">
  <div class="flex items-center justify-between border-b border-primary dark:border-primary-dark py-3 text-sm">
    <a href="/">
      <img src={~p"/images/labelmaker.png"} width="200" />
    </a>
    <div class="flex items-center gap-4">
      <a
        href="https://github.com/mcdoh/labelmaker"
        class="h-[35px] w-[125px]"
        target="_blank"
        rel="noopener noreferrer"
      >
        <button class="h-full w-full flex flex-row justify-center items-center gap-3 bg-slate-700 rounded-[6px] hover:bg-slate-600 transition cursor-pointer">
          <img src="/images/github-mark-white.svg" alt="GitHub" class="h-[22px] w-[22px]" />
          <img src="/images/github-logo-white.png" alt="GitHub" class="h-[22px]" />
        </button>
      </a>
      <a
        href="https://www.buymeacoffee.com/mcdoh"
        class="h-[35px] w-[125px] transition hover:drop-shadow-[0_0_3px_#ffd700]"
        target="_blank"
      >
        <img src="/images/bmc-button.svg" alt="Buy Me A Coffee" className="h-full" />
      </a>
    </div>
  </div>
</header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-2xl">
    <.flash_group flash={@flash} />
    {@inner_content}
  </div>
</main>
