37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { createContext, useContext, useEffect, useState } from 'react'
|
|
import { Lang, Translations, translations } from './translations'
|
|
|
|
const LangContext = createContext<{ lang: Lang; setLang: (l: Lang) => void; t: Translations } | null>(null)
|
|
|
|
const STORAGE_KEY = 'lang'
|
|
|
|
export function LangProvider({ children }: { children: React.ReactNode }) {
|
|
const [lang, setLangState] = useState<Lang>('en')
|
|
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem(STORAGE_KEY) as Lang | null
|
|
if (saved && saved in translations) setLangState(saved)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
document.documentElement.lang = lang
|
|
}, [lang])
|
|
|
|
const setLang = (l: Lang) => {
|
|
setLangState(l)
|
|
localStorage.setItem(STORAGE_KEY, l)
|
|
}
|
|
|
|
return (
|
|
<LangContext.Provider value={{ lang, setLang, t: translations[lang] }}>
|
|
{children}
|
|
</LangContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useLang() {
|
|
const ctx = useContext(LangContext)
|
|
if (!ctx) throw new Error('useLang must be used within LangProvider')
|
|
return ctx
|
|
}
|