Moved frontend to separate folder, added basic user context and user page
This commit is contained in:
20
front/components/User/RouteCard.tsx
Normal file
20
front/components/User/RouteCard.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
|
||||
import { IRouteCard } from "types/user";
|
||||
import { formatTimeLength } from "utils";
|
||||
|
||||
const RouteCard: React.FC<IRouteCard> = ({ route }) => {
|
||||
return (
|
||||
<div>
|
||||
<h2>{route.name}</h2>
|
||||
<p>
|
||||
Данный квесты вы сможете пройти за {formatTimeLength(route.averageTime)}
|
||||
</p>
|
||||
<p>Длинна маршрута: {route.length} м</p>
|
||||
<p>Примерное время прохождения: {route.averageTime}</p>
|
||||
<p>Точка старта:</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RouteCard;
|
16
front/components/User/RouteView.tsx
Normal file
16
front/components/User/RouteView.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import { IRouteView } from "types/user";
|
||||
import RouteCard from "./RouteCard";
|
||||
|
||||
const RouteView: React.FC<IRouteView> = ({ header, routes }) => {
|
||||
return (
|
||||
<>
|
||||
<h1>{header}</h1>
|
||||
{routes.map((route) => (
|
||||
<RouteCard key={route.id} route={route} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RouteView;
|
28
front/components/User/header.tsx
Normal file
28
front/components/User/header.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { IHeaderProps } from "types/user";
|
||||
|
||||
const Header: React.FC<IHeaderProps> = ({ points }) => {
|
||||
return (
|
||||
<header>
|
||||
<div>Очки: {points}</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/profile">
|
||||
<a>Профиль</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/achivements">
|
||||
<a>Ачивки</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
Reference in New Issue
Block a user