initial commit

contexts/AppContext.tsx

@@ -0,0 +1,82 @@
+"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;
+}