Simon
36 lines
992 B
TypeScript
36 lines
992 B
TypeScript
import { ReactNode, createContext, use, useState } from 'react'
|
|
|
|
type Lang = 'en-US' | 'zh-CN'
|
|
|
|
const LanguageContext = createContext<{
|
|
language: Lang
|
|
isZh: boolean
|
|
setLanguage: (lang: Lang) => void
|
|
} | null>(null)
|
|
|
|
export function LanguageProvider({ children }: { children: ReactNode }) {
|
|
const [language, setLang] = useState<Lang>(() => {
|
|
const stored = localStorage.getItem('language') as Lang
|
|
if (stored === 'zh-CN' || stored === 'en-US') return stored
|
|
return navigator.language.startsWith('zh') ? 'zh-CN' : 'en-US'
|
|
})
|
|
|
|
const setLanguage = (lang: Lang) => {
|
|
setLang(lang)
|
|
localStorage.setItem('language', lang)
|
|
}
|
|
|
|
return (
|
|
<LanguageContext value={{ language, isZh: language === 'zh-CN', setLanguage }}>
|
|
{children}
|
|
</LanguageContext>
|
|
)
|
|
}
|
|
|
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
export function useLanguage() {
|
|
const ctx = use(LanguageContext)
|
|
if (!ctx) throw new Error('useLanguage must be used within LanguageProvider')
|
|
return ctx
|
|
}
|