website/src/components/LanguagePicker.astro

---
import { locales, defaultLocale } from "astro-i18n-aut";
import { useTranslations } from "../i18n/utils";

function translatePath(lang: string) {
  const split = Astro.url.pathname.split("/").filter((s) => s.length);

  if (split[0] in locales) {
    split.shift();
  }

  if (lang === defaultLocale) {
    return `/${split.join("/")}`;
  }

  return `/${[lang, ...split].join("/")}`;
}

const flags = {
  de: "🇩🇪",
  en: "🇬🇧",
};

const t = useTranslations(Astro.url);
---

<ul class="flex items-center gap-4">
  {
    Object.entries(locales).map(([lang, label]) => (
      <li>
        <a
          class="flex gap-2 items-center"
          href={translatePath(lang)}
          data-astro-prefetch
        >
          <span class="text-xs">{flags[label as keyof typeof flags]}</span>
          {t(label as "de")}
        </a>
      </li>
    ))
  }
</ul>