добавлена локализация футера и почти всех основных компонентов

src/components/mainPart/calendar/calendar.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
 import Calendar from "react-calendar";
+import { ContextLang } from "../../ContextLang";
 import './calendar.css';
 
 type TProps = {
@@ -7,22 +8,59 @@ type TProps = {
 }
 
 export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
+    const {lang} = useContext(ContextLang);
     const months = {
-        0: 'Января',
-        1: 'Февраля',
-        2: 'Марта',
-        3: 'Апреля',
-        4: 'Мая',
-        5: 'Июня',
-        6: 'Июля',
-        7: 'Августа',
-        8: 'Сентября',
-        9: 'Октября',
-        10: 'Ноября',
-        11: 'Декабря'
+        0: {
+            ru: 'Января',
+            en: 'January'
+        },
+        1: {
+            ru: 'Февраля',
+            en: 'February'
+        },
+        2: {
+            ru: 'Марта',
+            en: 'March'
+        },
+        3: {
+            ru: 'Апреля',
+            en: 'April'
+        },
+        4: {
+            ru: 'Мая',
+            en: 'March'
+        },
+        5: {
+            ru: 'Июня',
+            en: 'June'
+        },
+        6: {
+            ru: 'Июля',
+            en: 'Jule'
+        },
+        7: {
+            ru: 'Августа',
+            en: 'August'
+        },
+        8: {
+            ru: 'Сентября',
+            en: 'September'
+        },
+        9: {
+            ru: 'Октября',
+            en: 'October'
+        },
+        10: {
+            ru: 'Ноября',
+            en: 'November'
+        },
+        11: {
+            ru: 'Декабря',
+            en: 'December'
+        }
     }    
     return <Calendar        
-        // locale="en"
+        locale={lang}
         showDoubleView={false}
         next2Label={null}
         prev2Label={null}
@@ -33,6 +71,6 @@ export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
         //         return props.disableDays.includes(a.date.getDate())
         // }}
         minDate={new Date()}
-        onClickDay={(e) => props.onCLick(`${e.getDate()} ${months[e.getMonth() as keyof typeof months]}`)}
+        onClickDay={(e) => props.onCLick(`${e.getDate()} ${months[e.getMonth() as keyof typeof months][lang]}`)}
     />
 })

src/components/mainPart/legend.tsx

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { useContext } from "react";
+import { LangDict } from "../langDict";
+import { ContextLang } from "../ContextLang";
 
 type TProps = {
     active: boolean
 }
 
 export const Legend:React.FC<TProps> = React.memo((props) => {
+    const {lang} = useContext(ContextLang);
     return <div className="legend-container">
         <span className={`legend-circle ${props.active ? 'active' : 'disable'}`}></span>
         <span className={`legend-text ${props.active ? 'active' : 'disable'}`}>
             {
                 props.active            
-                ? 'Запись есть'
-                : 'Записи нет'
+                ? LangDict.legendActive[lang]
+                : LangDict.legendDisabled[lang]
             }
         </span>
     </div>

src/components/mainPart/main-part-footer.tsx

@@ -1,19 +1,22 @@
-import React from "react";
+import React, { useContext } from "react";
+import { LangDict } from "../langDict";
+import { ContextLang } from "../ContextLang";
 
 export const MainPartFooter:React.FC = React.memo(() => {
+    const {lang} = useContext(ContextLang);
     return <div className="main-part-footer-container">
         <span className="main-part-footer-text-container">
             <div className="main-part-footer-text">
                 <span className="main-part-footer-text-one">
-                    Данная технология находится на стадии разработки.
+                    {LangDict.footNoteTextFirst[lang]}
                 </span>
                 <span className="main-part-footer-text-two">
-                    Если подключиться к демонстрации не удалось, свяжитесь с нами.
+                    {LangDict.footNoteTextSecond[lang]}
                 </span>            
             </div>
         </span>
         <span className="main-part-footer-number">
-            +7 800 770 00 67 (Россия) / +971 50 983 8902 (ОАЭ)
+            {LangDict.footNoteNumber[lang]}
         </span>
     </div>
 })

src/components/mainPart/mainPart.tsx

@@ -88,7 +88,7 @@ export const MainPart: React.FC = React.memo(() => {
         enableBackground();
         setPlaneContent(
             <PlanContentContainer 
-                title="Выбор даты"
+                title={LangDict.selectDate}
                 content={<CalendarComponent onCLick={(date) => onSelectDay(date)} />}
                 isLegend={true}
             />
@@ -103,7 +103,7 @@ export const MainPart: React.FC = React.memo(() => {
     function onSelectDay(date: string) {
         setPlaneContent(
             <PlanContentContainer 
-                title="Выбор времени"
+            title={LangDict.selectTime}
                 date={date}
                 content={<TimeSelector 
                     date={date}
@@ -115,10 +115,10 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onSelectTime(date: string, time: string) {
-        let dateTime = `${date} в ${time}`;
+        let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`;
         setPlaneContent(
             <PlanContentContainer
-                title="Оформление"
+                title={LangDict.checkout}
                 date={dateTime}
                 content={
                     <Form 

src/components/mainPart/planContentContainer.tsx

@@ -1,16 +1,21 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ContextLang } from "../ContextLang";
 import { Legend } from "./legend";
 
 type TProps = {
-    title: string
+    title: {
+        ru: string,
+        en: string
+    }
     date?: string
     content: JSX.Element
     isLegend: boolean
 }
 
 export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
+    const {lang} = useContext(ContextLang);
     return <div className="plan-content-container">
-        <span className="plan-content-title">{props.title}</span>
+        <span className="plan-content-title">{props.title[lang]}</span>
         {
             props.date
             ? <span className="plan-content-date">{props.date}</span>