83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { createContext, useContext, useState, useEffect, ReactNode } from "react";
|
|
|
|
type Language = "zh" | "en";
|
|
type Theme = "light" | "dark";
|
|
|
|
interface AppContextType {
|
|
language: Language;
|
|
setLanguage: (lang: Language) => void;
|
|
theme: Theme;
|
|
setTheme: (theme: Theme) => void;
|
|
t: (key: string) => string;
|
|
}
|
|
|
|
const AppContext = createContext<AppContextType | undefined>(undefined);
|
|
|
|
export function AppProvider({ children }: { children: ReactNode }) {
|
|
const [language, setLanguage] = useState<Language>("en");
|
|
const [theme, setTheme] = useState<Theme>("light");
|
|
|
|
// Initialize from localStorage
|
|
useEffect(() => {
|
|
const savedLanguage = localStorage.getItem("language") as Language;
|
|
const savedTheme = localStorage.getItem("theme") as Theme;
|
|
|
|
if (savedLanguage) {
|
|
setLanguage(savedLanguage);
|
|
}
|
|
|
|
if (savedTheme) {
|
|
setTheme(savedTheme);
|
|
} else {
|
|
// Check system preference
|
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
setTheme("dark");
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
// Apply theme
|
|
useEffect(() => {
|
|
localStorage.setItem("theme", theme);
|
|
if (theme === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}, [theme]);
|
|
|
|
// Save language preference
|
|
useEffect(() => {
|
|
localStorage.setItem("language", language);
|
|
}, [language]);
|
|
|
|
// Translation function
|
|
const t = (key: string): string => {
|
|
const translations = require(`../locales/${language}.json`);
|
|
const keys = key.split(".");
|
|
let value: any = translations;
|
|
|
|
for (const k of keys) {
|
|
value = value?.[k];
|
|
}
|
|
|
|
return value || key;
|
|
};
|
|
|
|
return (
|
|
<AppContext.Provider value={{ language, setLanguage, theme, setTheme, t }}>
|
|
{children}
|
|
</AppContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useApp() {
|
|
const context = useContext(AppContext);
|
|
if (!context) {
|
|
throw new Error("useApp must be used within AppProvider");
|
|
}
|
|
return context;
|
|
}
|