gh_UserManager/apps/web/components/language-provider.tsx
bermooda-company 54d5891edf user
2026-08-23 23:59:14 +03:30

64 lines
1.5 KiB
TypeScript

"use client";
import {
createContext,
useContext,
useEffect,
useState,
type ReactNode,
} from "react";
import type { Lang } from "@/lib/content";
import { dict, type Dict } from "@/lib/i18n";
interface LanguageContextValue {
lang: Lang;
dir: "rtl" | "ltr";
t: Dict;
toggle: () => void;
setLang: (lang: Lang) => void;
}
const LanguageContext = createContext<LanguageContextValue | null>(null);
const STORAGE_KEY = "ip-lang";
function getInitialLang(): Lang {
if (typeof window === "undefined") return "fa";
const stored = window.localStorage.getItem(STORAGE_KEY);
return stored === "en" || stored === "fa" ? stored : "fa";
}
export function LanguageProvider({ children }: { children: ReactNode }) {
const [lang, setLangState] = useState<Lang>("fa");
useEffect(() => {
setLangState(getInitialLang());
}, []);
useEffect(() => {
document.documentElement.lang = lang;
document.documentElement.dir = lang === "fa" ? "rtl" : "ltr";
window.localStorage.setItem(STORAGE_KEY, lang);
}, [lang]);
const value: LanguageContextValue = {
lang,
dir: lang === "fa" ? "rtl" : "ltr",
t: dict[lang],
toggle: () => setLangState((p) => (p === "fa" ? "en" : "fa")),
setLang: setLangState,
};
return (
<LanguageContext.Provider value={value}>
{children}
</LanguageContext.Provider>
);
}
export function useLanguage() {
const ctx = useContext(LanguageContext);
if (!ctx) throw new Error("useLanguage must be used within LanguageProvider");
return ctx;
}