1---
 2import {
 3  getIntlayer,
 4  getLocaleLang,
 5  getLocaleName,
 6  type Locale,
 7} from "intlayer";
 8
 9import { getPathWithoutLocale, getRelativeLocaleUrl } from "@/utils/url.ts";
10
11interface Props {
12  availableLocales: Locale[];
13}
14
15const { availableLocales } = Astro.props;
16const locale = Astro.currentLocale;
17const globalI18n = getIntlayer("global", locale);
18const currentPath = Astro.url.pathname;
19const getLocaleUrl = (target: Locale) =>
20  getRelativeLocaleUrl(getPathWithoutLocale(currentPath), target) +
21  Astro.url.search;
22---
23
24<select
25  class="locale-switcher"
26  aria-label={globalI18n.language}
27  onchange="location.href = this.value"
28>
29  {availableLocales.map((target) => (
30    <option
31      value={getLocaleUrl(target)}
32      selected={target === locale}
33      lang={target}
34    >
35      {getLocaleName(getLocaleLang(target), target)}
36    </option>
37  ))}
38</select>
39
40<style lang="scss" is:global>
41select.locale-switcher {
42  background-color: transparent;
43  border: none;
44  border-bottom: 0.05rem solid;
45  color: inherit;
46  font-family: inherit;
47  font-size: 1rem;
48}
49</style>