diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index cf0014a..07d413a 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -1,13 +1,36 @@
import MainPage from '../../pages/main-page';
+import FavoritesPage from '../../pages/favorites-page';
+import LoginPage from '../../pages/login-page';
+import OfferPage from '../../pages/offer-page';
+import NotFoundPage from '../../pages/not-found-page';
+import PrivateRoute from '../private-route/private-route';
+import { Route, BrowserRouter, Routes } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../consts';
type AppProps = {
offersCount: number;
-}
+};
-export default function App({offersCount}: AppProps): JSX.Element {
+export default function App({ offersCount }: AppProps): JSX.Element {
return (
-
+
+
+ }
+ />
+
+
+
+ }
+ />
+ } />
+ } />
+ } />
+
+
);
}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
new file mode 100644
index 0000000..b7cc6f0
--- /dev/null
+++ b/src/components/header/header.tsx
@@ -0,0 +1,42 @@
+export default function Header() {
+ return (
+
+ );
+}
diff --git a/src/components/private-route/private-route.tsx b/src/components/private-route/private-route.tsx
new file mode 100644
index 0000000..aecab12
--- /dev/null
+++ b/src/components/private-route/private-route.tsx
@@ -0,0 +1,19 @@
+import { Navigate } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../consts';
+
+type PrivateRouteProps = {
+ authorizationStatus: AuthorizationStatus;
+ children: JSX.Element;
+};
+
+function PrivateRoute(props: PrivateRouteProps): JSX.Element {
+ const { authorizationStatus, children } = props;
+
+ return authorizationStatus === AuthorizationStatus.Auth ? (
+ children
+ ) : (
+
+ );
+}
+
+export default PrivateRoute;
diff --git a/src/consts.ts b/src/consts.ts
new file mode 100644
index 0000000..79d34d4
--- /dev/null
+++ b/src/consts.ts
@@ -0,0 +1,12 @@
+export enum AppRoute {
+ Main = '/',
+ Login = '/login',
+ Favorites = '/favorites',
+ Offer = '/offer/:id'
+}
+
+export enum AuthorizationStatus {
+ Auth = 'AUTH',
+ NoAuth = 'NO_AUTH',
+ Unknown = 'UNKNOWN',
+}
diff --git a/src/pages/favorites-empty-page.tsx b/src/pages/favorites-empty-page.tsx
index 510c0fe..f2e825e 100644
--- a/src/pages/favorites-empty-page.tsx
+++ b/src/pages/favorites-empty-page.tsx
@@ -1,49 +1,31 @@
+import Header from '../components/header/header';
+
export default function FavoritesEmptyPage(): JSX.Element {
return (
-
-
+
Favorites (empty)
Nothing yet saved.
-
Save properties to narrow down search or plan your future trips.
+
+ Save properties to narrow down search or plan your future trips.
+
diff --git a/src/pages/favorites-page.tsx b/src/pages/favorites-page.tsx
index 414db8d..4637153 100644
--- a/src/pages/favorites-page.tsx
+++ b/src/pages/favorites-page.tsx
@@ -1,34 +1,9 @@
+import Header from '../components/header/header';
+
export default function FavoritesPage(): JSX.Element {
return (
-
+
@@ -50,17 +25,32 @@ export default function FavoritesPage(): JSX.Element {
€180
- / night
+
+ / night
+
-
-
+
+
In bookmarks
@@ -68,7 +58,7 @@ export default function FavoritesPage(): JSX.Element {
@@ -82,17 +72,32 @@ export default function FavoritesPage(): JSX.Element {
€80
- / night
+
+ / night
+
-
-
+
+
In bookmarks
@@ -100,7 +105,7 @@ export default function FavoritesPage(): JSX.Element {
@@ -125,17 +130,32 @@ export default function FavoritesPage(): JSX.Element {
€180
- / night
+
+ / night
+
-
-
+
+
In bookmarks
@@ -143,7 +163,7 @@ export default function FavoritesPage(): JSX.Element {
@@ -161,7 +181,13 @@ export default function FavoritesPage(): JSX.Element {
diff --git a/src/pages/main-empty-page.tsx b/src/pages/main-empty-page.tsx
index 1b83297..5fc7395 100644
--- a/src/pages/main-empty-page.tsx
+++ b/src/pages/main-empty-page.tsx
@@ -1,34 +1,9 @@
+import Header from '../components/header/header';
+
export default function MainEmptyPage(): JSX.Element {
return (
-
+
Cities
@@ -61,7 +36,10 @@ export default function MainEmptyPage(): JSX.Element {
-
+
Dusseldorf
@@ -73,7 +51,10 @@ export default function MainEmptyPage(): JSX.Element {
No places to stay available
-
We could not find any property available at the moment in Dusseldorf
+
+ We could not find any property available at the moment in
+ Dusseldorf
+
diff --git a/src/pages/main-page.tsx b/src/pages/main-page.tsx
index 08f5009..0457d70 100644
--- a/src/pages/main-page.tsx
+++ b/src/pages/main-page.tsx
@@ -1,48 +1,21 @@
import { ReactNode } from 'react';
import Card from '../components/card/card';
+import Header from '../components/header/header';
type MainPageProps = {
offersCount: number;
-}
+};
-export default function MainPage ({offersCount}: MainPageProps): JSX.Element {
+export default function MainPage({ offersCount }: MainPageProps): JSX.Element {
const elements: ReactNode[] = [];
-
for (let i = 0; i < offersCount; i++) {
elements.push( );
}
return (
-
+
Cities
@@ -96,10 +69,21 @@ export default function MainPage ({offersCount}: MainPageProps): JSX.Element {
- Popular
- Price: low to high
- Price: high to low
- Top rated first
+
+ Popular
+
+
+ Price: low to high
+
+
+ Price: high to low
+
+
+ Top rated first
+
diff --git a/src/pages/not-found-page.tsx b/src/pages/not-found-page.tsx
new file mode 100644
index 0000000..3e1c783
--- /dev/null
+++ b/src/pages/not-found-page.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+
+export default function NotFoundPage(): JSX.Element {
+ return (
+
+
+
404 Page not found
+
+ Вернуться на главную
+
+
+
+ );
+}
diff --git a/src/pages/offer-not-logged-page.tsx b/src/pages/offer-not-logged-page.tsx
index a747640..024911b 100644
--- a/src/pages/offer-not-logged-page.tsx
+++ b/src/pages/offer-not-logged-page.tsx
@@ -6,15 +6,23 @@ export default function OfferNotLoggedPage(): JSX.Element {
-
-
-
+
+
Sign in
@@ -29,22 +37,46 @@ export default function OfferNotLoggedPage(): JSX.Element {
@@ -66,7 +98,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
-
+
Rating
4.8
@@ -89,83 +121,79 @@ export default function OfferNotLoggedPage(): JSX.Element {
What's inside
-
- Wi-Fi
-
-
- Washing machine
-
-
- Towels
-
-
- Heating
-
-
- Coffee machine
-
-
- Baby seat
-
-
- Kitchen
-
-
- Dishwasher
-
-
- Cabel TV
-
-
- Fridge
-
+ Wi-Fi
+ Washing machine
+ Towels
+ Heating
+ Coffee machine
+ Baby seat
+ Kitchen
+ Dishwasher
+ Cabel TV
+ Fridge
Meet the host
-
+
-
- Angelina
-
-
- Pro
-
+
Angelina
+
Pro
- A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+ A quiet cozy and picturesque that hides behind a a river by
+ the unique lightness of Amsterdam. The building is green and
+ from 18th century.
- An independent House, strategically located between Rembrand Square and National Opera, but where the bustle of the city comes to rest in this alley flowery and colorful.
+ An independent House, strategically located between Rembrand
+ Square and National Opera, but where the bustle of the city
+ comes to rest in this alley flowery and colorful.
- Reviews · 1
+
+ Reviews · 1
+
-
+
-
- Max
-
+
Max
- A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+ A quiet cozy and picturesque that hides behind a a river
+ by the unique lightness of Amsterdam. The building is
+ green and from 18th century.
-
April 2019
+
+ April 2019
+
@@ -176,22 +204,39 @@ export default function OfferNotLoggedPage(): JSX.Element {
- Other places in the neighbourhood
+
+ Other places in the neighbourhood
+
€80
- / night
+
+ / night
+
-
-
+
+
In bookmarks
@@ -199,7 +244,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
@@ -213,17 +258,32 @@ export default function OfferNotLoggedPage(): JSX.Element {
€132
- / night
+
+ / night
+
-
-
+
+
To bookmarks
@@ -231,7 +291,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
@@ -248,17 +308,32 @@ export default function OfferNotLoggedPage(): JSX.Element {
€180
- / night
+
+ / night
+
-
-
+
+
To bookmarks
@@ -266,7 +341,7 @@ export default function OfferNotLoggedPage(): JSX.Element {
diff --git a/src/pages/offer-page.tsx b/src/pages/offer-page.tsx
index 5cdb1cd..c1b37ba 100644
--- a/src/pages/offer-page.tsx
+++ b/src/pages/offer-page.tsx
@@ -1,56 +1,55 @@
+import Header from '../components/header/header';
+
export default function OfferPage(): JSX.Element {
return (
-
+
@@ -72,7 +71,7 @@ export default function OfferPage(): JSX.Element {
-
+
Rating
4.8
@@ -95,130 +94,196 @@ export default function OfferPage(): JSX.Element {
What's inside
-
- Wi-Fi
-
-
- Washing machine
-
-
- Towels
-
-
- Heating
-
-
- Coffee machine
-
-
- Baby seat
-
-
- Kitchen
-
-
- Dishwasher
-
-
- Cabel TV
-
-
- Fridge
-
+ Wi-Fi
+ Washing machine
+ Towels
+ Heating
+ Coffee machine
+ Baby seat
+ Kitchen
+ Dishwasher
+ Cabel TV
+ Fridge
Meet the host
-
+
-
- Angelina
-
-
- Pro
-
+
Angelina
+
Pro
- A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+ A quiet cozy and picturesque that hides behind a a river by
+ the unique lightness of Amsterdam. The building is green and
+ from 18th century.
- An independent House, strategically located between Rembrand Square and National Opera, but where the bustle of the city comes to rest in this alley flowery and colorful.
+ An independent House, strategically located between Rembrand
+ Square and National Opera, but where the bustle of the city
+ comes to rest in this alley flowery and colorful.
- Reviews · 1
+
+ Reviews · 1
+
-
+
-
- Max
-
+
Max
- A quiet cozy and picturesque that hides behind a a river by the unique lightness of Amsterdam. The building is green and from 18th century.
+ A quiet cozy and picturesque that hides behind a a river
+ by the unique lightness of Amsterdam. The building is
+ green and from 18th century.
-
April 2019
+
+ April 2019
+
@@ -228,22 +293,39 @@ export default function OfferPage(): JSX.Element {
- Other places in the neighbourhood
+
+ Other places in the neighbourhood
+
€80
- / night
+
+ / night
+
-
-
+
+
In bookmarks
@@ -251,7 +333,7 @@ export default function OfferPage(): JSX.Element {
@@ -265,17 +347,32 @@ export default function OfferPage(): JSX.Element {
€132
- / night
+
+ / night
+
-
-
+
+
To bookmarks
@@ -283,7 +380,7 @@ export default function OfferPage(): JSX.Element {
@@ -300,17 +397,32 @@ export default function OfferPage(): JSX.Element {
€180
- / night
+
+ / night
+
-
-
+
+
To bookmarks
@@ -318,7 +430,7 @@ export default function OfferPage(): JSX.Element {