first etap

package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.1.0",
     "react-loader-spinner": "^5.4.5",
     "react-redux": "^8.1.3",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.3"

src/components/App.jsx

@@ -1,31 +1,42 @@
-import React, { useEffect } from 'react';
-import { ContactForm } from './ContactForm/ContactForm';
-import { Filter } from './Filter/Filter';
-import { ContactsList } from './ContactsList/ContactList';
-import { useDispatch, useSelector } from 'react-redux';
-import { fetchContacts } from 'redux/operations';
-import { selectError, selectLoading } from 'redux/selectors';
-import { Loading } from './Loading';
-export function App() {
-  const isLoading = useSelector(selectLoading);
-  const error = useSelector(selectError);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(fetchContacts());
-  }, [dispatch]);
+import { Contacts } from 'pages/Contacts/Contacts';
+import { Layout } from 'pages/Layout/Layout';
+import { Login } from 'pages/Login/Login';
+import { Register } from 'pages/Register/Register';
+import { Suspense } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { AppBar } from './AppBar/AppBar';
 
+export function App() {
   return (
-    <div>
-      {isLoading && <Loading />}
-      {error && 'something went wrong'}
-      <div>
-        <h1>Phonebook</h1>
-        <ContactForm />
-        <h2>Contacts</h2>
-        <Filter />
-        <ContactsList />
-      </div>
-    </div>
+    <>
+      <AppBar />
+      <Routes>
+        <Route path="/" element={<Layout />} />
+        <Route
+          path="/register"
+          element={
+            <Suspense>
+              <Register />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/login"
+          element={
+            <Suspense>
+              <Login />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/contacts"
+          element={
+            <Suspense>
+              <Contacts />
+            </Suspense>
+          }
+        />
+      </Routes>
+    </>
   );
 }

src/components/AppBar/AppBar.jsx

@@ -0,0 +1,9 @@
+import { Navigation } from "components/Navigation/Navigation"
+
+export const AppBar = () =>{
+    return(
+        <header>
+            <Navigation/>
+        </header>
+    )
+}

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+import css from './Navigation.module.css';
+
+export function Navigation() {
+  return (
+    <nav className={css.nav}>
+      <ul className={css.list}>
+        <li>
+          <Link to="/register" className={css.link}>
+            Register
+          </Link>
+        </li>
+        <li>
+          <Link to="/login" className={css.link}>
+            Login
+          </Link>
+        </li>
+        <li>
+          <Link to="/contacts" className={css.link}>
+            Contacts
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}

src/components/Navigation/Navigation.module.css

@@ -0,0 +1,20 @@
+.list{
+    display: flex;
+    gap: 20px;
+    list-style: none;
+    padding: 0;
+}
+.link{
+    font-size: 20px;
+    text-decoration: none;
+    color: pink;
+    transition: color 200ms ease-in-out;
+}
+.link:hover,
+.link:focus{
+    color: rgb(241, 131, 149);
+}
+.nav{
+    display: flex;
+    justify-content: center;
+}

src/index.js

@@ -5,12 +5,15 @@ import { Provider } from 'react-redux';
 import { persistor, store } from 'redux/store';
 import './index.css';
 import { PersistGate } from 'redux-persist/integration/react';
+import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Provider store={store}>
       <PersistGate persistor={persistor}>
+      <BrowserRouter basename='goit-react-hw-08-phonebook'>
         <App />
+        </BrowserRouter>
       </PersistGate>
     </Provider>
   </React.StrictMode>

src/pages/Contacts/Contacts.jsx

@@ -0,0 +1,5 @@
+export const Contacts = () =>{
+    return(
+        <div></div>
+    )
+}

src/pages/Layout/Layout.jsx

@@ -0,0 +1,35 @@
+import React, { Suspense, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchContacts } from 'redux/operations';
+import { selectError, selectLoading } from 'redux/selectors';
+import { ContactForm } from 'components/ContactForm/ContactForm';
+import { Filter } from 'components/Filter/Filter';
+import { ContactsList } from 'components/ContactsList/ContactList';
+import { Loading } from 'components/Loading';
+import { Outlet } from 'react-router-dom';
+
+export const Layout = () => {
+  const isLoading = useSelector(selectLoading);
+  const error = useSelector(selectError);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchContacts());
+  }, [dispatch]);
+  return (
+    <div>
+      {isLoading && <Loading />}
+      {error && 'something went wrong'}
+      <div>
+        <h1>Phonebook</h1>
+        <ContactForm />
+        <h2>Contacts</h2>
+        <Filter />
+        <ContactsList />
+      </div>
+      <Suspense fallback={<div>Loading page...</div>}>
+        <Outlet />
+      </Suspense>
+    </div>
+  );
+};

src/pages/Login/Login.jsx

@@ -0,0 +1,32 @@
+import css from './Login.module.css';
+
+export const Login = () => {
+  return (
+    <div>
+      <form className={css.form}>
+        <h1 className={css.title}>Login</h1>
+        <ul className={css.list}>
+          <li>
+            <input
+              type="email"
+              name="email"
+              placeholder="Email"
+              className={css.input}
+            />
+          </li>
+          <li>
+            <input
+              type="password"
+              name="password"
+              placeholder="Password"
+              className={css.input}
+            />
+          </li>
+        </ul>
+        <button type="submit" className={css.button}>
+          Login
+        </button>
+      </form>
+    </div>
+  );
+};

src/pages/Login/Login.module.css

@@ -0,0 +1,53 @@
+.form {
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  width: 300px;
+  height: 320px;
+  background-color: white;
+  border-radius: 8px;
+}
+.title {
+  color: rgb(53, 189, 235);
+  margin: 44px 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 44px;
+}
+.input {
+  border-radius: 3px;
+  border: 1px rgb(130, 209, 235) solid;
+  width: 74%;
+  padding: 5px;
+  transition: border 200ms ease-in-out;
+}
+.input:hover,
+.input:focus {
+  border: 1px rgb(53, 189, 235) solid;
+}
+.button {
+  align-self: center;
+  width: 50%;
+  border-radius: 16px;
+  padding: 6px 2px;
+  border: 1px rgb(53, 189, 235) solid;
+  background-color: rgb(130, 209, 235);
+  color: white;
+  cursor: pointer;
+  transition: background-color 200ms ease-in-out;
+}
+.button:hover,
+.button:focus {
+  background-color: rgb(53, 189, 235);
+}