40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<!-- #region LanguageSwitcher [C:1] [TYPE Component] [SEMANTICS i18n, locale, switcher, language, atom] -->
|
|
<!-- @BRIEF Language switcher dropdown for i18n locale selection. -->
|
|
<!-- @LAYER UI -->
|
|
<!--
|
|
@SEMANTICS: language-switcher, i18n-ui, ui-atom
|
|
@PURPOSE: Dropdown component to switch between supported languages.
|
|
@LAYER Atom
|
|
@RELATION BINDS_TO -> [EXT:frontend:i18n.locale]
|
|
@RELATION DEPENDS_ON -> [Select]
|
|
|
|
@UX_STATE: Idle -> Active locale is shown in the compact selector.
|
|
@UX_STATE: Switching -> Bound locale updates immediately after selection.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
// [SECTION: IMPORTS]
|
|
import { locale } from "$lib/i18n/index.svelte.js";
|
|
import Select from "./Select.svelte";
|
|
// [/SECTION: IMPORTS]
|
|
|
|
const options = [
|
|
{ value: "ru", label: "Русский" },
|
|
{ value: "en", label: "English" },
|
|
];
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="w-32">
|
|
<Select
|
|
bind:value={$locale}
|
|
{options}
|
|
id="global-language-select"
|
|
name="global_language"
|
|
aria-label="Language"
|
|
/>
|
|
</div>
|
|
<!-- [/SECTION: TEMPLATE] -->
|
|
|
|
<!-- #endregion LanguageSwitcher -->
|