Merge pull request #10 from Quiddlee/add_multilang_functionality

Add multilang functionality

src/locales/en.ts

@@ -0,0 +1,6 @@
+const en = {
+	header: { h1: { h2: 'english' } },
+	button: 'Press me',
+};
+
+export default en;

src/locales/ru.ts

@@ -0,0 +1,6 @@
+const ru = {
+	header: { h1: { h2: 'русский' } },
+	button: 'Нажми',
+};
+
+export default ru;

src/main.tsx

@@ -3,10 +3,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from '@/App';
+
+import LanguageProvider from './shared/Context/LanguageContext';
+
 import '@/styles/index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <LanguageProvider>
+      <App />
+    </LanguageProvider>
   </React.StrictMode>,
 );

src/shared/Context/LanguageContext.tsx

@@ -0,0 +1,36 @@
+import { createContext, ReactNode, useCallback, useMemo, useState } from 'react';
+
+import enTranslation from '@/locales/en';
+import ruTranslation from '@/locales/ru';
+
+type Translation = typeof enTranslation | typeof ruTranslation;
+
+type LanguageContextType = {
+  language: string;
+  changeLanguage: () => void;
+  translation: Translation;
+};
+
+const TranslationFiles: { [key: string]: Translation } = {
+  en: enTranslation,
+  ru: ruTranslation,
+};
+
+export const LanguageContext = createContext<LanguageContextType>({} as LanguageContextType);
+
+export default function LanguageProvider({ children }: { children: ReactNode }) {
+  const [language, setLanguage] = useState('en');
+
+  const changeLanguage = useCallback(() => {
+    const newLang = language === 'en' ? 'ru' : 'en';
+    setLanguage(newLang);
+  }, [language]);
+
+  const translation = TranslationFiles[language];
+  const contextValue = useMemo(
+    () => ({ language, changeLanguage, translation }),
+    [language, changeLanguage, translation],
+  );
+
+  return <LanguageContext.Provider value={contextValue}>{children}</LanguageContext.Provider>;
+}

src/shared/Context/hooks.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+
+import { LanguageContext } from './LanguageContext';
+
+const useLanguage = () => {
+	return useContext(LanguageContext);
+};
+
+export default useLanguage;