93f7ef88e3
Impressum page (/impressum) with rechtskonform attribution for: - Wiktionary/Kaikki.org (CC BY-SA 3.0 + GFDL) — dictionary data - ipa-dict (MIT) — IPA phonetic transcriptions - Wikimedia Commons (CC BY-SA) — vocabulary images - Piper TTS (MIT) — speech synthesis - pyspellchecker (MIT) — spell checking Language dropdown expanded from 7 to 26 European languages: DE, EN, TR, AR, UK, RU, PL, FR, ES, IT, PT, NL, RO, EL, BG, HR, CS, HU, SV, DA, FI, SK, SL, LT, LV, ET. Dropdown now shows full name: "TR — Turkce", "AR — العربية", etc. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
interface LanguageSwitcherProps {
|
|
currentLang: string
|
|
onLangChange: (lang: string) => void
|
|
isDark: boolean
|
|
compact?: boolean
|
|
}
|
|
|
|
const LANGS = [
|
|
// Main languages
|
|
{ code: 'de', label: 'DE', name: 'Deutsch' },
|
|
{ code: 'en', label: 'EN', name: 'English' },
|
|
// Migration languages
|
|
{ code: 'tr', label: 'TR', name: 'Turkce' },
|
|
{ code: 'ar', label: 'AR', name: 'العربية' },
|
|
{ code: 'uk', label: 'UK', name: 'Українська' },
|
|
{ code: 'ru', label: 'RU', name: 'Русский' },
|
|
{ code: 'pl', label: 'PL', name: 'Polski' },
|
|
// European languages
|
|
{ code: 'fr', label: 'FR', name: 'Francais' },
|
|
{ code: 'es', label: 'ES', name: 'Espanol' },
|
|
{ code: 'it', label: 'IT', name: 'Italiano' },
|
|
{ code: 'pt', label: 'PT', name: 'Portugues' },
|
|
{ code: 'nl', label: 'NL', name: 'Nederlands' },
|
|
{ code: 'ro', label: 'RO', name: 'Romana' },
|
|
{ code: 'el', label: 'EL', name: 'Ελληνικά' },
|
|
{ code: 'bg', label: 'BG', name: 'Български' },
|
|
{ code: 'hr', label: 'HR', name: 'Hrvatski' },
|
|
{ code: 'cs', label: 'CS', name: 'Cestina' },
|
|
{ code: 'hu', label: 'HU', name: 'Magyar' },
|
|
{ code: 'sv', label: 'SV', name: 'Svenska' },
|
|
{ code: 'da', label: 'DA', name: 'Dansk' },
|
|
{ code: 'fi', label: 'FI', name: 'Suomi' },
|
|
{ code: 'sk', label: 'SK', name: 'Slovencina' },
|
|
{ code: 'sl', label: 'SL', name: 'Slovenscina' },
|
|
{ code: 'lt', label: 'LT', name: 'Lietuviu' },
|
|
{ code: 'lv', label: 'LV', name: 'Latviesu' },
|
|
{ code: 'et', label: 'ET', name: 'Eesti' },
|
|
]
|
|
|
|
/**
|
|
* Compact language switcher for exercise pages.
|
|
* Shows as dropdown or pill buttons depending on compact prop.
|
|
*/
|
|
export function LanguageSwitcher({ currentLang, onLangChange, isDark, compact = true }: LanguageSwitcherProps) {
|
|
if (compact) {
|
|
return (
|
|
<select
|
|
value={currentLang}
|
|
onChange={e => onLangChange(e.target.value)}
|
|
className={`text-xs px-2 py-1 rounded-lg border-0 cursor-pointer ${
|
|
isDark ? 'bg-white/10 text-white/70' : 'bg-slate-100 text-slate-600'
|
|
}`}
|
|
>
|
|
{LANGS.map(l => <option key={l.code} value={l.code}>{l.label} — {l.name}</option>)}
|
|
</select>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-1">
|
|
{LANGS.map(l => (
|
|
<button
|
|
key={l.code}
|
|
onClick={() => onLangChange(l.code)}
|
|
className={`px-2 py-1 rounded-lg text-xs font-medium transition-all ${
|
|
currentLang === l.code
|
|
? 'bg-blue-500 text-white'
|
|
: isDark ? 'bg-white/5 text-white/40 hover:bg-white/10' : 'bg-slate-100 text-slate-400 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{l.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|