diff --git a/package-lock.json b/package-lock.json
index a5c3c37..ef433b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
"modern-normalize": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-loader-spinner": "^6.1.6",
"react-modal": "^3.16.1",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.3",
@@ -3787,6 +3788,27 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "node_modules/react-loader-spinner": {
+ "version": "6.1.6",
+ "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz",
+ "integrity": "sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==",
+ "dependencies": {
+ "react-is": "^18.2.0",
+ "styled-components": "^6.1.2"
+ },
+ "engines": {
+ "node": ">= 12"
+ },
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/react-loader-spinner/node_modules/react-is": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ },
"node_modules/react-modal": {
"version": "3.16.1",
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
diff --git a/package.json b/package.json
index e1fc662..933ef56 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"modern-normalize": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-loader-spinner": "^6.1.6",
"react-modal": "^3.16.1",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.3",
diff --git a/src/App.jsx b/src/App.jsx
index 2d32a20..6ba0cff 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,14 +2,18 @@ import { lazy } from "react";
import { Route, Routes } from "react-router-dom";
import { AppLayout } from "./components/AppLayout/AppLayout";
+const WelcomePage = lazy(() => import("./pages/WelcomePage"));
const HomePage = lazy(() => import("./pages/HomePage"));
+const FavouritePage = lazy(() => import("./pages/FavouritePage"));
const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
function App() {
return (
}>
- } />
+ } />
+ } />
+ } />
} />
diff --git a/src/components/AppLayout/AppLayout.jsx b/src/components/AppLayout/AppLayout.jsx
index 22b015a..2e3cda1 100644
--- a/src/components/AppLayout/AppLayout.jsx
+++ b/src/components/AppLayout/AppLayout.jsx
@@ -3,6 +3,8 @@ import { Suspense, useEffect } from "react";
import { GlobalStyle } from "../GlobalStyle";
import { useDispatch } from "react-redux";
import { fetchCars } from "../../redux/cars/operations";
+import { Header } from "../Header/Header";
+import { Loader } from "../Loader/Loader";
export const AppLayout = () => {
const dispatch = useDispatch();
@@ -12,8 +14,11 @@ export const AppLayout = () => {
return (
<>
+
- Loader}>
+ }>
diff --git a/src/components/FavouriteCar/FavouriteCar.jsx b/src/components/FavouriteCar/FavouriteCar.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/FavouriteCar/FavouriteCar.styled.js b/src/components/FavouriteCar/FavouriteCar.styled.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/FavouriteList/FavouriteList.jsx b/src/components/FavouriteList/FavouriteList.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/FavouriteList/FavouriteList.styled.js b/src/components/FavouriteList/FavouriteList.styled.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
new file mode 100644
index 0000000..62842b9
--- /dev/null
+++ b/src/components/Header/Header.jsx
@@ -0,0 +1,14 @@
+import { NavLink } from "react-router-dom";
+import { HeaderContainer, HeaderNavigation } from "./Header.styled";
+
+export const Header = () => {
+ return (
+
+
+ RentCamp
+ Rent
+ Favourite
+
+
+ );
+};
diff --git a/src/components/Header/Header.styled.js b/src/components/Header/Header.styled.js
new file mode 100644
index 0000000..741b0e8
--- /dev/null
+++ b/src/components/Header/Header.styled.js
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const HeaderContainer = styled.div`
+ margin: 0 auto;
+ padding: 30px 64px;
+ max-width: 1440px;
+`;
+
+export const HeaderNavigation = styled.nav`
+ display: flex;
+ gap: 20px;
+`;
diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx
new file mode 100644
index 0000000..7910488
--- /dev/null
+++ b/src/components/Loader/Loader.jsx
@@ -0,0 +1,18 @@
+import { RotatingLines } from "react-loader-spinner";
+import { LoaderContainer, Backbrop } from "./Loader.styled";
+
+export const Loader = () => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src/components/Loader/Loader.styled.js b/src/components/Loader/Loader.styled.js
new file mode 100644
index 0000000..c697f4c
--- /dev/null
+++ b/src/components/Loader/Loader.styled.js
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Backbrop = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 100;
+
+ width: 100%;
+ height: 100%;
+ background-color: rgba(46, 47, 66, 0.4);
+`;
+
+export const LoaderContainer = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+`;
diff --git a/src/pages/FavouritePage.jsx b/src/pages/FavouritePage.jsx
new file mode 100644
index 0000000..98de803
--- /dev/null
+++ b/src/pages/FavouritePage.jsx
@@ -0,0 +1,7 @@
+export default function FavouritePage() {
+ return (
+
+ );
+}
diff --git a/src/pages/WelcomePage.jsx b/src/pages/WelcomePage.jsx
new file mode 100644
index 0000000..3867971
--- /dev/null
+++ b/src/pages/WelcomePage.jsx
@@ -0,0 +1,7 @@
+export default function WelcomePage() {
+ return (
+
+ );
+}