add basic navigation

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",

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 (
  <Routes>
  <Route path="/" element={<AppLayout />}>
- <Route index element={<HomePage />} />
+ <Route index element={<WelcomePage />} />
+ <Route path="/home" element={<HomePage />} />
+ <Route path="/favourite" element={<FavouritePage />} />
  </Route>
  <Route path="*" element={<NotFoundPage />} />
  </Routes>

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 (
  <>
+ <header>
+ <Header />
+ </header>
  <main>
- <Suspense fallback={<div>Loader</div>}>
+ <Suspense fallback={<Loader />}>
  <Outlet />
  </Suspense>
  </main>

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 (
+ <HeaderContainer>
+ <HeaderNavigation>
+ <NavLink to="/">RentCamp</NavLink>
+ <NavLink to="/home">Rent</NavLink>
+ <NavLink to="/favourite">Favourite</NavLink>
+ </HeaderNavigation>
+ </HeaderContainer>
+ );
+};

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;
+`;

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 (
+ <Backbrop>
+ <LoaderContainer>
+ <RotatingLines
+ strokeColor="#4f58fd"
+ strokeWidth="5"
+ animationDuration="0.75"
+ width="96"
+ visible={true}
+ />
+ </LoaderContainer>
+ </Backbrop>
+ );
+};

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%);
+`;

src/pages/FavouritePage.jsx

@@ -0,0 +1,7 @@
+export default function FavouritePage() {
+ return (
+ <section className="container">
+ <h1>favourite</h1>
+ </section>
+ );
+}

src/pages/WelcomePage.jsx

@@ -0,0 +1,7 @@
+export default function WelcomePage() {
+ return (
+ <section className="container">
+ <h1>WelcomePage</h1>
+ </section>
+ );
+}