добавлено визуальное переключение языка

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;
 }
 

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>
 })