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:
Jörg Lohrer 2026-04-21 13:33:40 +02:00
parent 22997138f9
commit 617b3dfccc
1 changed files with 48 additions and 0 deletions

View File

@ -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>