DmitriyB
103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import "./index.css";
|
|
import "./App.css"
|
|
import { Route, Switch } from "react-router-dom";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import AOS from "aos";
|
|
import "aos/dist/aos.css";
|
|
import { Main } from "./components/main/main";
|
|
import { Header } from "./components/header/header";
|
|
import { Footer } from "./components/footer/footer";
|
|
import { Demostration } from "./components/demonstration/demonstartion";
|
|
import textRU from "./utils/textRU"
|
|
import textEN from "./utils/textEN";
|
|
|
|
export type TObjct = {
|
|
calendar: boolean;
|
|
timePicker: boolean;
|
|
form: boolean;
|
|
confirm: boolean;
|
|
};
|
|
|
|
|
|
|
|
|
|
export const App: React.FC = () => {
|
|
const [language, setLanguage] = useState<any>("");
|
|
const [text, setText] = useState(textRU);
|
|
const savedLanguage = localStorage.getItem('savedLang')
|
|
|
|
|
|
useEffect(() => {
|
|
if (savedLanguage !== null) {
|
|
setSavedLanguage()
|
|
} else {
|
|
setInitialLanguage()
|
|
}
|
|
}, []);
|
|
|
|
function setSavedLanguage() {
|
|
if (savedLanguage === 'RU') {
|
|
setLanguage('RU')
|
|
localStorage.setItem("lang", 'RU')
|
|
setText(textRU)
|
|
} else if (savedLanguage === 'EN') {
|
|
setLanguage('EN')
|
|
localStorage.setItem("lang", 'EN')
|
|
setText(textEN)
|
|
}
|
|
}
|
|
|
|
function setInitialLanguage() {
|
|
if (window.navigator.language === 'ru') {
|
|
setLanguage('RU')
|
|
localStorage.setItem("lang", 'RU')
|
|
setText(textRU)
|
|
|
|
} else {
|
|
setLanguage('EN')
|
|
setText(textEN)
|
|
}
|
|
}
|
|
|
|
function changeLanguage(language: string) {
|
|
if (language === 'RU') {
|
|
setLanguage(language);
|
|
setText(textRU)
|
|
localStorage.setItem('savedLang', 'RU');
|
|
localStorage.setItem("lang", 'RU')
|
|
} else {
|
|
setLanguage('EN')
|
|
localStorage.setItem("lang", 'EN')
|
|
localStorage.setItem("savedLang", 'EN')
|
|
setText(textEN)
|
|
}
|
|
}
|
|
|
|
AOS.init({
|
|
once: true,
|
|
});
|
|
return (
|
|
<Switch>
|
|
<Route path="/" exact>
|
|
<div className='App'>
|
|
<Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
|
|
<Main locale={language} text={text}></Main>
|
|
<Footer language={language} text={text.footer}></Footer>
|
|
</div>
|
|
</Route>
|
|
<Route exact path="/demos">
|
|
<div className='App'>
|
|
<main className="main">
|
|
<Header text={text.footer} language={language} changeLanguage={changeLanguage}></Header>
|
|
<Demostration text={text.demos}></Demostration>
|
|
</main>
|
|
</div>
|
|
</Route>
|
|
|
|
</Switch>
|
|
);
|
|
};
|
|
|
|
export default App;
|