From 2cb028ae16aaee7d058e8108e7a8243b11ef044c Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Tue, 26 Jul 2022 16:59:39 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=B2=D0=B8=D0=B7=D1=83=D0=B0=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=8F=D0=B7=D1=8B=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainPart/mainPart.css       |  8 +++++---
 src/components/mainPart/mainPartHeader.tsx | 12 +++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index a3624e3..2a79ba4 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -40,20 +40,22 @@
     font-weight: 400;
     font-size: 18px;
     line-height: 22px;
-    width: 90px;
+    /* width: 90px; */
     display: flex;
     justify-content: space-between;
     gap: 8px;
 }
 
-.main-part-header-lang {
+.main-part-header-lang-button {
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
+    padding: 2px 8px;
+    cursor: pointer;
 }
 
-.main-part-header-lang.ru {
+.main-part-header-lang-button.active {
     background-color: #CE56C2;
 }
 
diff --git a/src/components/mainPart/mainPartHeader.tsx b/src/components/mainPart/mainPartHeader.tsx
index b2971de..d72de48 100644
--- a/src/components/mainPart/mainPartHeader.tsx
+++ b/src/components/mainPart/mainPartHeader.tsx
@@ -1,13 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import whiteLogo from './logoWhiteIcon.svg';
 
 export const MainPartHeader:React.FC = React.memo(() => {
+    const [activeButton, setActiveButton] = useState<string>('ru');
+
+    function onClickChangeLang(lang: string) {
+        setActiveButton(lang);
+    }
+
     return <div className="main-part-header">
         <img className="main-part-header-logo" alt="logo" src={whiteLogo} />
         <div className="main-part-header-lang">
-            <span className="main-part-header-lang en">EN</span>
+            <span className={`main-part-header-lang-button ${activeButton === 'en' ? 'active' : null}`} onClick={() => onClickChangeLang('en')}>EN</span>
             <span className="main-part-header-lang-slash">/</span>
-            <span className="main-part-header-lang ru">RU</span>
+            <span className={`main-part-header-lang-button ${activeButton === 'ru' ? 'active' : null}`} onClick={() => onClickChangeLang('ru')}>RU</span>
         </div>
     </div>
 })
\ No newline at end of file