Add persistent language switcher across all learn/parent pages
useNativeLanguage: Now has setNativeLang() that persists to localStorage. Language selection carries across all pages automatically. LanguageSwitcher: Compact dropdown component added to learn/layout.tsx and parent/layout.tsx — visible on every sub-page (top-right). Parent portal: Language dropdown syncs both UI language and native language. Parents can switch language mid-session (e.g. when both parents speak different languages). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
58
studio-v2/components/learn/LanguageSwitcher.tsx
Normal file
58
studio-v2/components/learn/LanguageSwitcher.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
|
||||
interface LanguageSwitcherProps {
|
||||
currentLang: string
|
||||
onLangChange: (lang: string) => void
|
||||
isDark: boolean
|
||||
compact?: boolean
|
||||
}
|
||||
|
||||
const LANGS = [
|
||||
{ code: 'de', label: 'DE' },
|
||||
{ code: 'en', label: 'EN' },
|
||||
{ code: 'tr', label: 'TR' },
|
||||
{ code: 'ar', label: 'AR' },
|
||||
{ code: 'uk', label: 'UK' },
|
||||
{ code: 'ru', label: 'RU' },
|
||||
{ code: 'pl', label: 'PL' },
|
||||
]
|
||||
|
||||
/**
|
||||
* 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}</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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user