www/src/components/Button.astro

---
import { getLocale, getPath } from "~/utils/i18n"

const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const { class: className, isPrimary, isAlert, isBordered, href, id, extra } = Astro.props
---

{
  href ? (
    <a
      id={id}
      {...extra}
      href={getLocalePath(href)}
      class:list={[
        "transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02] active:scale-[0.98]",
        className,
        isPrimary
          ? "border-dark bg-dark text-paper shadow-lg"
          : isAlert
            ? "bg-red-300 text-dark"
            : !isBordered
              ? "bg-subtle"
              : "!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm",
      ]}
    >
      <slot />
    </a>
  ) : (
    <button
      id={id}
      {...extra}
      class:list={[
        "transition-bg flex items-center justify-center gap-2 rounded-lg px-6 py-3 transition-transform duration-150 hover:scale-[1.02]",
        className,
        isPrimary
          ? "border-dark bg-dark text-paper shadow-md"
          : isAlert
            ? "bg-red-300 text-dark"
            : !isBordered
              ? ""
              : "!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm",
      ]}
    >
      <slot />
    </button>
  )
}
<style>
  button,
  a {
    font-size: 0.9rem;

    &[disabled] {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
</style>