diff --git a/Readme.md b/Readme.md
index 0c1478c..039cda3 100644
--- a/Readme.md
+++ b/Readme.md
@@ -2,6 +2,7 @@
- Студент: [Анастасия Сайдазимова](https://up.htmlacademy.ru/react-individual/2/user/2554551).
- Наставник: `Артём Новоселов`.
+- [Просмотр проекта](https://2554551-six-cities-2-92qvbhbt8-nslyumas-projects.vercel.app/)
---
diff --git a/markup/img/not-found.jpeg b/markup/img/not-found.jpeg
new file mode 100644
index 0000000..30d96fc
Binary files /dev/null and b/markup/img/not-found.jpeg differ
diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index 5e153e5..1bce880 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -1,9 +1,32 @@
/* eslint-disable arrow-body-style */
-
-import Main from '../main/main';
+import { Route, BrowserRouter, Routes } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../const';
+import Main from '../../pages/main/main';
+import Login from '../../pages/login/login';
+import Favorites from '../../pages/favorites/favorites';
+import Offer from '../../pages/offer/offer';
+import NotFound from '../../pages/not-found/not-found';
+import PrivateRoute from '../private-route/private-route';
const App = () => {
- return ;
+ return (
+
+
+ } />
+ } />
+
+
+
+ }
+ />
+ } />
+ } />
+
+
+ );
};
export default App;
diff --git a/src/components/private-route/private-route.tsx b/src/components/private-route/private-route.tsx
new file mode 100644
index 0000000..cfd3b54
--- /dev/null
+++ b/src/components/private-route/private-route.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../const';
+
+// Сборка не проходит, если испльзовать PropsWithChildren и не указать тип Navigate
+// 'PrivateRoute' cannot be used as a JSX component.
+// Its return type 'string | number | boolean | Element | Iterable | null | undefined' is not a valid JSX element.
+// Type 'undefined' is not assignable to type 'Element | null'.
+
+// type Props = PropsWithChildren<{ authorizationStatus: AuthorizationStatus }>;
+type Props = {
+ authorizationStatus: AuthorizationStatus;
+ children: React.JSX.Element;
+};
+
+const PrivateRoute = ({ authorizationStatus, children }: Props) =>
+ authorizationStatus === AuthorizationStatus.Auth
+ ? children
+ : (() as React.JSX.Element);
+
+export default PrivateRoute;
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000..af628bf
--- /dev/null
+++ b/src/const.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/components/favorites/favorites.tsx b/src/pages/favorites/favorites.tsx
similarity index 100%
rename from src/components/favorites/favorites.tsx
rename to src/pages/favorites/favorites.tsx
diff --git a/src/components/login/login.tsx b/src/pages/login/login.tsx
similarity index 100%
rename from src/components/login/login.tsx
rename to src/pages/login/login.tsx
diff --git a/src/components/main/main.tsx b/src/pages/main/main.tsx
similarity index 99%
rename from src/components/main/main.tsx
rename to src/pages/main/main.tsx
index 93b9d25..4f97e52 100644
--- a/src/components/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -1,7 +1,7 @@
/* eslint-disable arrow-body-style */
import { CARDS } from '../../data/cardsData';
-import Card from '../card/card';
+import Card from '../../components/card/card';
const Main = () => {
return (
diff --git a/src/pages/not-found/not-found.module.css b/src/pages/not-found/not-found.module.css
new file mode 100644
index 0000000..5aa31e5
--- /dev/null
+++ b/src/pages/not-found/not-found.module.css
@@ -0,0 +1,34 @@
+.container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: url("markup/img/not-found.jpeg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+
+.box {
+ background-color: rgba(255, 255, 255, 0.8);
+ text-align: center;
+ padding: 0 30px;
+ border-radius: 16px;
+ box-shadow: 0px 0px 16px 30px rgba(255, 255, 255, 0.8);
+}
+
+.title {
+ font-size: 5rem;
+}
+
+.text {
+ font-size: 2rem;
+}
+
+.link {
+ color: #4481c3;
+}/*# sourceMappingURL=not-found.module.css.map */
\ No newline at end of file
diff --git a/src/pages/not-found/not-found.module.css.map b/src/pages/not-found/not-found.module.css.map
new file mode 100644
index 0000000..89c3d23
--- /dev/null
+++ b/src/pages/not-found/not-found.module.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["not-found.module.sass","not-found.module.css"],"names":[],"mappings":"AAAA;EACE,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,2BAAA;ACCF;;ADCA;EACE,0CAAA;EACA,kBAAA;EACA,eAAA;EACA,mBAAA;EACA,sDAAA;ACEF;;ADAA;EACE,eAAA;ACGF;;ADDA;EACE,eAAA;ACIF;;ADFA;EACE,cAAA;ACKF","file":"not-found.module.css"}
\ No newline at end of file
diff --git a/src/pages/not-found/not-found.module.sass b/src/pages/not-found/not-found.module.sass
new file mode 100644
index 0000000..fc74a1a
--- /dev/null
+++ b/src/pages/not-found/not-found.module.sass
@@ -0,0 +1,29 @@
+.container
+ position: fixed
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ display: flex
+ justify-content: center
+ align-items: center
+ background-image: url('markup/img/not-found.jpeg')
+ background-repeat: no-repeat
+ background-size: cover
+ background-position: center
+
+.box
+ background-color: rgba(255, 255, 255, 0.8)
+ text-align: center
+ padding: 0 30px
+ border-radius: 16px
+ box-shadow: 0px 0px 16px 30px rgba(255, 255, 255, 0.8)
+
+.title
+ font-size: 5rem
+
+.text
+ font-size: 2rem
+
+.link
+ color: #4481c3
diff --git a/src/pages/not-found/not-found.tsx b/src/pages/not-found/not-found.tsx
new file mode 100644
index 0000000..2c5caa4
--- /dev/null
+++ b/src/pages/not-found/not-found.tsx
@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+import styles from './not-found.module.css';
+
+const NotFound = () => (
+
+
+
404
+
+
Страница не найдена
+
+
+
Вернуться на главную
+
+
+
+);
+
+export default NotFound;
diff --git a/src/components/offer/offer.tsx b/src/pages/offer/offer.tsx
similarity index 100%
rename from src/components/offer/offer.tsx
rename to src/pages/offer/offer.tsx