Add Lang Switcher

Author: webdevia

src/app/App.css

@@ -1,5 +1,7 @@
 .App {
   text-align: center;
+  background-color: var(--background-color);
+  color: var(--color);
 }
 
 .App-logo {
@@ -14,14 +16,18 @@
 }
 
 .App-header {
-  background-color: var(--background-color);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: var(--color);
+}
+
+.App-nav {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
 }
 
 .App-link {

src/app/App.tsx

@@ -3,24 +3,55 @@ import logo from './logo.svg';
 import './App.css';
 
 import { ThemeProvider } from '../shared/providers/ThemeProvider';
+import { LangProvider, Content, useLang } from '../shared/providers/LangProvider';
 import { ThemeSwitcher } from '../shared/theme-switcher/ThemeSwitcher';
+import { LangSwitcher } from '../shared/lang-switcher/LangSwitcher';
+
+const MainContent = () => {
+  const content: Content = {
+    fullname: { ru: 'Игорь Аралов', en: 'Igor Aralov' },
+    target: {
+      ru: 'Научиться разрабатывать веб-приложения при помощи React',
+      en: 'Learn to develop web applications using React',
+    },
+    skills: {
+      ru: 'Профессионально работаю SQL разработчиком уже 10 лет и принимаю участие в разработке десктопного приложения на Delphi',
+      en: 'I have been working professionally as an SQL developer for 10 years and am involved in the development of a desktop application using Delphi.',
+    },
+    hobby: {
+      ru: 'Интересуюсь фронтенд и фуллстек разработкой на js/ts',
+      en: "I'm interested in frontend and full-stack development using js/ts",
+    },
+  };
+
+  const { useContent } = useLang();
+  const l = useContent(content);
+
+  return (
+    <>
+      <h1>{l('fullname')} ([email protected])</h1>
+      <p>{l('target')}</p>
+      <p>{l('skills')}</p>
+      <p>{l('hobby')}</p>
+    </>
+  );
+};
 
 function App() {
   return (
     <ThemeProvider>
-      <div className="App">
-        <header className="App-header">
-          <ThemeSwitcher />
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1>Игорь Аралов ([email protected])</h1>
-          <p>Научиться разрабатывать веб-приложения при помощи React</p>
-          <p>
-            Профессионально работаю SQL разработчиком уже 10 лет и принимаю участие в разработке десктопного приложения
-            на Delphi
-          </p>
-          <p>Интересуюсь фронтенд и фуллстек разработкой на js/ts</p>
-        </header>
-      </div>
+      <LangProvider>
+        <div className="App">
+          <header className="App-header">
+            <div className="App-nav">
+              <ThemeSwitcher />
+              <LangSwitcher />
+            </div>
+            <img src={logo} className="App-logo" alt="logo" />
+            <MainContent />
+          </header>
+        </div>
+      </LangProvider>
     </ThemeProvider>
   );
 }

src/app/index.css

@@ -1,15 +1,11 @@
 [data-theme='light'] {
   --background-color: #fff;
   --color: #000;
-  --logo-bg-color: #f4f4f4;
-  --logo-text-color: #333;
 }
 
 [data-theme='dark'] {
   --background-color: #333;
   --color: #fff;
-  --logo-bg-color: #333;
-  --logo-text-color: #f4f4f4;
 }
 
 body {

src/shared/header/Header.module.scss

@@ -1,5 +1,5 @@
 .header {
-  display:flex;
+  display: flex;
   justify-content: space-between;
   position: -webkit-sticky;
   position: sticky;
@@ -10,3 +10,14 @@
   min-height: 50px;
   z-index: 1000;
 }
+
+.left {
+  display: flex;
+  gap: 10px;
+}
+
+.right {
+  display: flex;
+  justify-content: end;
+  gap: 10px;
+}

src/shared/header/Header.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Logo } from '../logo/Logo';
 import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
+import { LangSwitcher } from '../lang-switcher/LangSwitcher';
 import s from './Header.module.scss';
 
 export type HeaderProps = {
@@ -9,7 +10,10 @@ export type HeaderProps = {
 
 export const Header = ({ showLogo = true }: HeaderProps) => (
   <div className={s.header}>
-    {showLogo && <Logo />}
-    <ThemeSwitcher />
+    <div className={s.left}>{showLogo && <Logo />}</div>
+    <div className={s.right}>
+      <ThemeSwitcher />
+      <LangSwitcher />
+    </div>
   </div>
 );

src/shared/lang-switcher/LangSwitcher.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useLang } from '../providers/LangProvider';
+import { Button } from '../button/Button';
+
+export const LangSwitcher = () => {
+  const { lang, toggleLang } = useLang();
+
+  return <Button onClick={toggleLang}>Switch to {lang === 'ru' ? 'English' : 'Russian'} lang</Button>;
+};