добавлена локализация футера и почти всех основных компонентов
This commit is contained in:
DmitriyB
@@ -1,15 +1,29 @@
|
||||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { ContextLang } from "../ContextLang";
|
||||
|
||||
type TProps = {
|
||||
title: string
|
||||
title: {
|
||||
ru: string,
|
||||
en: string
|
||||
}
|
||||
href?: string
|
||||
pairData: Array<{value1: string, value2?: string}>
|
||||
pairData: Array<{
|
||||
value1: {
|
||||
ru: string,
|
||||
en: string
|
||||
} | string,
|
||||
value2?: {
|
||||
ru: string,
|
||||
en: string
|
||||
} | string
|
||||
}>
|
||||
}
|
||||
|
||||
export const ContactContainer:React.FC<TProps> = React.memo((props) => {
|
||||
const {lang} = useContext(ContextLang);
|
||||
return <div className="contact-container">
|
||||
<div className="contact-header">
|
||||
<span className="contact-header-title">{props.title}</span>
|
||||
<span className="contact-header-title">{props.title[lang]}</span>
|
||||
<span className="contact-header-line"></span>
|
||||
</div>
|
||||
{
|
||||
@@ -19,14 +33,18 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
|
||||
}
|
||||
<div className="contact-data-container">
|
||||
{props.pairData.map(pair => {
|
||||
return <div key={pair.value1} className="contact-data-row">
|
||||
return <div key={typeof(pair.value1) === 'string' ? pair.value1 : pair.value1[lang]} className="contact-data-row">
|
||||
<div className="contact-data-value-container">
|
||||
<span className="contact-data-value">{pair.value1}</span>
|
||||
<span className="contact-data-value">
|
||||
{typeof(pair.value1) === 'string' ? pair.value1 : pair.value1[lang]}
|
||||
</span>
|
||||
</div>
|
||||
{
|
||||
pair?.value2
|
||||
? <div className="contact-data-value-container">
|
||||
<span className="contact-data-value">{pair?.value2}</span>
|
||||
<span className="contact-data-value">
|
||||
{typeof(pair?.value2) === 'string' ? pair?.value2 : pair?.value2[lang]}
|
||||
</span>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { LangDict } from "../langDict";
|
||||
import { ContactContainer } from "./contactsContainer";
|
||||
import './footer.css';
|
||||
import whiteLogo from './logoWhiteIcon.svg';
|
||||
@@ -10,28 +11,28 @@ export const Footer:React.FC = React.memo(() => {
|
||||
<div className="footer-content-contacts">
|
||||
<div className="footer-content-contacts-first-container">
|
||||
<ContactContainer
|
||||
title="Контакты"
|
||||
title={LangDict.contactTitle}
|
||||
href="graff.tech"
|
||||
pairData={[
|
||||
{value1: 'Россия', value2: 'ОАЭ'},
|
||||
{value1: LangDict.contactRus, value2: LangDict.contactUae},
|
||||
{value1: 'info@graff.tech', value2: 'waseem@graff.tech'},
|
||||
{value1: '+7 800 770 00 67', value2: '+971 50 983 8902'}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-content-contacts-second-container">
|
||||
<ContactContainer
|
||||
title="Соцсети"
|
||||
title={LangDict.socials}
|
||||
pairData={[
|
||||
{value1: 'Facebook', value2: 'Instagram'},
|
||||
{value1: 'YouTube', value2: 'VK'}
|
||||
]}
|
||||
/>
|
||||
<ContactContainer
|
||||
title="Адрес"
|
||||
title={LangDict.address}
|
||||
pairData={[
|
||||
{value1: 'ул. Московская, 47,'},
|
||||
{value1: 'Екатеринбург, Россия'}
|
||||
{value1: LangDict.streetName},
|
||||
{value1: LangDict.townName}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -103,7 +103,7 @@ export const LangDict = {
|
||||
ru: 'Россия',
|
||||
en: 'Russia'
|
||||
},
|
||||
contactUat: {
|
||||
contactUae: {
|
||||
ru: 'ОАЭ',
|
||||
en: 'UAE'
|
||||
},
|
||||
|
||||
@@ -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]}`)}
|
||||
/>
|
||||
})
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
})
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user