LocaleSelector.astro

---
import { getLocale, getLocaleName, locales, t } from '@lib/i18n';
import type { SiteLocale } from '@lib/datocms/types';
import type { PageUrl } from '@lib/seo';
import '@assets/a11y.css';

const activeLocale = getLocale();

interface Props {
  pageUrls: PageUrl[];
}
const { pageUrls } = Astro.props;

const getPageHref = (locale: SiteLocale) => {
  const pageUrl = pageUrls.find((pageUrl) => pageUrl.locale === locale);
  return pageUrl
    ? new URL(pageUrl.pathname, Astro.site)
    : new URL(`/${locale}/`, Astro.site);
};
---

<locale-selector>
  <nav aria-labelledby="locale-selector-title">
    <span id="locale-selector-title" class="a11y-sr-only">
      {t('select_language')}
    </span>
    <!-- [html-validate-disable-next no-redundant-role -- see ./README.md] -->
    <ul role="list" style="list-style: none;">
      {
        locales.map((locale) => (
          <li>
            <a
              hreflang={locale}
              href={getPageHref(locale as SiteLocale)}
              lang={locale}
              aria-current={locale === activeLocale ? 'page' : 'false'}
              aria-label={getLocaleName(locale)}
            >
              <abbr title={getLocaleName(locale)}>{locale}</abbr>
            </a>
          </li>
        ))
      }
    </ul>
  </nav>
</locale-selector>

<script src="./LocaleSelector.client.ts"></script>

<style>
  /* basic styling, can be removed */
  ul {
    margin: 0;
    margin-inline-end: 20px;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 10px;
  }
</style>