84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import React, { useContext, useEffect, useState } from "react";
|
||
|
||
import styles from "styles/home.module.css";
|
||
import { HomeRefContext } from "context/ref";
|
||
import Register from "components/Register";
|
||
import Login from "components/Login";
|
||
import { UserContext } from "context/user";
|
||
import { useRouter } from "next/router";
|
||
import { LoadingContext } from "context/loading";
|
||
|
||
const advantagesList = [
|
||
{
|
||
icon: "home/map.svg",
|
||
alt: "Map",
|
||
text:
|
||
"Поиск маршрутов для прогулки по знаковым местам незнакомомого города",
|
||
},
|
||
{
|
||
icon: "home/coin.svg",
|
||
alt: "Coin",
|
||
text: "Бесплатный сервис по всей Югре",
|
||
},
|
||
{
|
||
icon: "home/dialog.svg",
|
||
alt: "Dialog",
|
||
text: "Новые знакомства и общение",
|
||
},
|
||
];
|
||
|
||
const Home: React.FC = () => {
|
||
const { setLoading } = useContext(LoadingContext);
|
||
const { userState } = useContext(UserContext);
|
||
const router = useRouter();
|
||
|
||
useEffect(() => {
|
||
if (userState) {
|
||
router.push("/user");
|
||
return null;
|
||
}
|
||
else setLoading(false);
|
||
}, []);
|
||
|
||
const scrollRef = useContext(HomeRefContext);
|
||
|
||
const [newUser, setNewUser] = useState<boolean>(true);
|
||
|
||
return (
|
||
<>
|
||
<div className={styles.picCard}>
|
||
<p className={styles.picMainText}>
|
||
Туристический
|
||
<br />
|
||
квест
|
||
</p>
|
||
<p className={styles.picSubText}>
|
||
Увлекательное путешествие в форме квеста без скучного поиска новых,
|
||
интересных мест
|
||
</p>
|
||
</div>
|
||
<ul className={styles.advantages}>
|
||
{advantagesList.map((element, key) => (
|
||
<li className={styles.advantage} key={key}>
|
||
<img
|
||
className={styles.advantageIcon}
|
||
src={element.icon}
|
||
alt={element.alt}
|
||
/>
|
||
<p className={styles.advantageText}>{element.text}</p>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<div ref={scrollRef} className={styles.authContainer}>
|
||
<h2 className={styles.authHeader}>
|
||
Поле для <a onClick={() => setNewUser(true)}>регистрации</a>/
|
||
<a onClick={() => setNewUser(false)}>входа</a>
|
||
</h2>
|
||
{newUser ? <Register /> : <Login />}
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Home;
|