feat(app): LanguageSwitcher-komponente mit de/en-buttons
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
22997138f9
commit
617b3dfccc
|
|
@ -0,0 +1,48 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { t, activeLocale, SUPPORTED_LOCALES } from '$lib/i18n';
|
||||||
|
import type { SupportedLocale } from '$lib/i18n/activeLocale';
|
||||||
|
|
||||||
|
let current = $state<SupportedLocale>('de');
|
||||||
|
activeLocale.subscribe((v) => (current = v));
|
||||||
|
|
||||||
|
function select(lang: SupportedLocale) {
|
||||||
|
activeLocale.set(lang);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="switcher" role="group" aria-label={$t('lang.switch_aria')}>
|
||||||
|
{#each SUPPORTED_LOCALES as code}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn"
|
||||||
|
class:active={current === code}
|
||||||
|
aria-pressed={current === code}
|
||||||
|
onclick={() => select(code)}
|
||||||
|
>{code.toUpperCase()}</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.switcher {
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--muted);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 1px 7px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
.btn.active {
|
||||||
|
color: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue