From 4713d191233cb509b7f33cd4ea14fffbba7e113b Mon Sep 17 00:00:00 2001 From: Mykola <53128883+Nikolaus-B@users.noreply.github.com> Date: Sun, 24 Mar 2024 15:27:28 +0200 Subject: [PATCH] add basic navigation --- package-lock.json | 22 +++++++++++++++++++ package.json | 1 + src/App.jsx | 6 ++++- src/components/AppLayout/AppLayout.jsx | 7 +++++- src/components/FavouriteCar/FavouriteCar.jsx | 0 .../FavouriteCar/FavouriteCar.styled.js | 0 .../FavouriteList/FavouriteList.jsx | 0 .../FavouriteList/FavouriteList.styled.js | 0 src/components/Header/Header.jsx | 14 ++++++++++++ src/components/Header/Header.styled.js | 12 ++++++++++ src/components/Loader/Loader.jsx | 18 +++++++++++++++ src/components/Loader/Loader.styled.js | 19 ++++++++++++++++ src/pages/FavouritePage.jsx | 7 ++++++ src/pages/WelcomePage.jsx | 7 ++++++ 14 files changed, 111 insertions(+), 2 deletions(-) create mode 100644 src/components/FavouriteCar/FavouriteCar.jsx create mode 100644 src/components/FavouriteCar/FavouriteCar.styled.js create mode 100644 src/components/FavouriteList/FavouriteList.jsx create mode 100644 src/components/FavouriteList/FavouriteList.styled.js create mode 100644 src/components/Header/Header.jsx create mode 100644 src/components/Header/Header.styled.js create mode 100644 src/components/Loader/Loader.jsx create mode 100644 src/components/Loader/Loader.styled.js create mode 100644 src/pages/FavouritePage.jsx create mode 100644 src/pages/WelcomePage.jsx 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 ( +
+

favourite

+
+ ); +} 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 ( +
+

WelcomePage

+
+ ); +}