fix: fix page duplication
This commit is contained in:
parent
5b3b2e53f2
commit
7702809958
@ -1,87 +1,96 @@
|
|||||||
"use client"
|
'use client';
|
||||||
|
|
||||||
import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
|
import { Loader } from 'lucide-react';
|
||||||
import enTranslations from "./locales/en.json"
|
import {
|
||||||
import ruTranslations from "./locales/ru.json"
|
createContext,
|
||||||
|
type ReactNode,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
import enTranslations from './locales/en.json';
|
||||||
|
import ruTranslations from './locales/ru.json';
|
||||||
|
|
||||||
// Define available languages
|
// Define available languages
|
||||||
export const languages = {
|
export const languages = {
|
||||||
en: { name: "English", flag: "🇬🇧" },
|
en: { name: 'English', flag: '🇬🇧' },
|
||||||
ru: { name: "Русский", flag: "🇷🇺" },
|
ru: { name: 'Русский', flag: '🇷🇺' },
|
||||||
}
|
};
|
||||||
|
|
||||||
export type Language = keyof typeof languages
|
export type Language = keyof typeof languages;
|
||||||
|
|
||||||
// Define translations type with flat structure
|
// Define translations type with flat structure
|
||||||
export type Translations = Record<string, string>
|
export type Translations = Record<string, string>;
|
||||||
|
|
||||||
// Load translations
|
// Load translations
|
||||||
const translations: Record<Language, Translations> = {
|
const translations: Record<Language, Translations> = {
|
||||||
en: enTranslations,
|
en: enTranslations,
|
||||||
ru: ruTranslations,
|
ru: ruTranslations,
|
||||||
}
|
};
|
||||||
|
|
||||||
// Create context
|
// Create context
|
||||||
type LanguageContextType = {
|
type LanguageContextType = {
|
||||||
language: Language
|
language: Language;
|
||||||
setLanguage: (lang: Language) => void
|
setLanguage: (lang: Language) => void;
|
||||||
t: (key: string) => string
|
t: (key: string) => string;
|
||||||
}
|
};
|
||||||
|
|
||||||
const LanguageContext = createContext<LanguageContextType | undefined>(undefined)
|
const LanguageContext = createContext<LanguageContextType | undefined>(
|
||||||
|
undefined,
|
||||||
|
);
|
||||||
|
|
||||||
// Create provider
|
// Create provider
|
||||||
export function LanguageProvider({ children }: { children: ReactNode }) {
|
export function LanguageProvider({ children }: { children: ReactNode }) {
|
||||||
// Default to Russian, but check localStorage on client
|
// Default to Russian, but check localStorage on client
|
||||||
const [language, setLanguageState] = useState<Language>("ru")
|
const [language, setLanguageState] = useState<Language>('ru');
|
||||||
const [isLoaded, setIsLoaded] = useState(false)
|
const [isLoaded, setIsLoaded] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Check if we're in the browser
|
// Check if we're in the browser
|
||||||
if (typeof window !== "undefined") {
|
if (typeof window !== 'undefined') {
|
||||||
const savedLanguage = localStorage.getItem("language") as Language
|
const savedLanguage = localStorage.getItem('language') as Language;
|
||||||
if (savedLanguage && languages[savedLanguage]) {
|
if (savedLanguage && languages[savedLanguage]) {
|
||||||
setLanguageState(savedLanguage)
|
setLanguageState(savedLanguage);
|
||||||
}
|
}
|
||||||
setIsLoaded(true)
|
setIsLoaded(true);
|
||||||
}
|
}
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
const setLanguage = (lang: Language) => {
|
const setLanguage = (lang: Language) => {
|
||||||
setLanguageState(lang)
|
setLanguageState(lang);
|
||||||
if (typeof window !== "undefined") {
|
if (typeof window !== 'undefined') {
|
||||||
localStorage.setItem("language", lang)
|
localStorage.setItem('language', lang);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// Translation function for flat structure
|
// Translation function for flat structure
|
||||||
const t = (key: string): string => {
|
const t = (key: string): string => {
|
||||||
if (translations[language][key]) {
|
if (translations[language][key]) {
|
||||||
return translations[language][key]
|
return translations[language][key];
|
||||||
}
|
}
|
||||||
|
|
||||||
console.warn(`Translation key not found: ${key}`)
|
console.warn(`Translation key not found: ${key}`);
|
||||||
return key
|
return key;
|
||||||
}
|
};
|
||||||
|
|
||||||
// Only render children when language is loaded from localStorage
|
return (
|
||||||
if (!isLoaded && typeof window !== "undefined") {
|
<LanguageContext.Provider value={{ language, setLanguage, t }}>
|
||||||
return null // Or a loading spinner
|
{children}
|
||||||
}
|
</LanguageContext.Provider>
|
||||||
|
);
|
||||||
return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create hook
|
// Create hook
|
||||||
export function useLanguage() {
|
export function useLanguage() {
|
||||||
const context = useContext(LanguageContext)
|
const context = useContext(LanguageContext);
|
||||||
if (context === undefined) {
|
if (context === undefined) {
|
||||||
throw new Error("useLanguage must be used within a LanguageProvider")
|
throw new Error('useLanguage must be used within a LanguageProvider');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof context.t !== 'function') {
|
if (typeof context.t !== 'function') {
|
||||||
throw new Error("Translation function (t) is not available");
|
throw new Error('Translation function (t) is not available');
|
||||||
}
|
}
|
||||||
|
|
||||||
return context
|
return context;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user