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:
@@ -1,20 +1,26 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { exerciseT, type ExerciseKey } from './exerciseTranslations'
|
||||
|
||||
const STORAGE_KEY = 'bp_native_language'
|
||||
|
||||
/**
|
||||
* Hook to read the user's native language.
|
||||
* Returns translation helper for exercise UI texts.
|
||||
* Hook for native language state + translations.
|
||||
* Persists to localStorage. Can be changed at any time (e.g. parent switches language).
|
||||
*/
|
||||
export function useNativeLanguage() {
|
||||
const [nativeLang, setNativeLang] = useState('de')
|
||||
const [nativeLang, setNativeLangState] = useState('de')
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
if (stored) setNativeLang(stored)
|
||||
if (stored) setNativeLangState(stored)
|
||||
}, [])
|
||||
|
||||
/** Change native language (persists to localStorage) */
|
||||
const setNativeLang = useCallback((lang: string) => {
|
||||
setNativeLangState(lang)
|
||||
localStorage.setItem(STORAGE_KEY, lang)
|
||||
}, [])
|
||||
|
||||
const isThirdLanguage = nativeLang !== 'de' && nativeLang !== 'en'
|
||||
@@ -34,5 +40,5 @@ export function useNativeLanguage() {
|
||||
return typeof entry === 'string' ? entry : entry.text || ''
|
||||
}
|
||||
|
||||
return { nativeLang, isThirdLanguage, t, wordInNative }
|
||||
return { nativeLang, setNativeLang, isThirdLanguage, t, wordInNative }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user