Homework 5

src/app/App.css

@@ -1,38 +1,44 @@
 .App {
-    text-align: center;
+  text-align: center;
+  background-color: var(--background-color);
+  color: var(--color);
 }
 
 .App-logo {
-    height: 40vmin;
-    pointer-events: none;
+  height: 40vmin;
+  pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
 
 .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-nav {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
 }
 
 .App-link {
-    color: #61dafb;
+  color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/app/App.tsx

@@ -2,22 +2,57 @@ import React from 'react';
 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')} (igor.aralov@rambler.ru)</h1>
+      <p>{l('target')}</p>
+      <p>{l('skills')}</p>
+      <p>{l('hobby')}</p>
+    </>
+  );
+};
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          <h1>Игорь Аралов (igor.aralov@rambler.ru)</h1>
-          <p>Научиться разрабатывать веб-приложения при помощи React</p>
-          <p>
-            Профессионально работаю SQL разработчиком уже 10 лет и принимаю участие в разработке десктопного приложения
-            на Delphi
-          </p>
-          <p>Интересуюсь фронтенд и фуллстек разработкой на js/ts</p>
-        </p>
-      </header>
-    </div>
+    <ThemeProvider>
+      <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,13 +1,21 @@
+[data-theme='light'] {
+  --background-color: #fff;
+  --color: #000;
+}
+
+[data-theme='dark'] {
+  --background-color: #333;
+  --color: #fff;
+}
+
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-        monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/shared/button/Button.tsx

@@ -1,12 +1,15 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import cn from 'clsx';
 import s from './Button.modules.scss';
 
 type ButtonProps = {
   children: ReactNode;
   disabled?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const Button = ({ children, disabled = false }: ButtonProps) => (
-  <button className={cn(s.button, { [s.disabled]: disabled })}>{children}</button>
+export const Button = ({ children, onClick, disabled = false }: ButtonProps) => (
+  <button className={cn(s.button, { [s.disabled]: disabled })} onClick={onClick}>
+    {children}
+  </button>
 );

src/shared/header/Header.module.scss

@@ -1,10 +1,23 @@
 .header {
+  display: flex;
+  justify-content: space-between;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  background-color: #333;
+  background-color: var(--header-bg-color);
   color: white;
   padding: 10px;
   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,9 +1,19 @@
 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';
 
-type HeaderProps = {
+export type HeaderProps = {
   showLogo: boolean;
 };
 
-export const Header = ({ showLogo = true }: HeaderProps) => <div className={s.header}>{showLogo && <Logo />}</div>;
+export const Header = ({ showLogo = true }: HeaderProps) => (
+  <div className={s.header}>
+    <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>;
+};

src/shared/layout/Layout.module.scss

@@ -1,5 +1,6 @@
 .content {
   margin: 0;
   padding: 20px;
-  background-color: #f4f4f4;
+  background-color: var(--layout-bg-color);
+  color: var(--color);
 }