added library

package.json

@@ -13,6 +13,7 @@
     "numeral": "^2.0.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.0.7",

src/components/App.jsx

@@ -1,13 +1,21 @@
-// import TweetsPage from 'pages/TweetsPage';
+import TweetsPage from 'pages/TweetsPage';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import './App.css';
-import Tweet from './Tweet/Tweet';
+import Layout from './Layout/Layout';
+import Home from './Home/Home';
+// import Tweet from './Tweet/Tweet';
 
 const App = () => {
   return (
-    <div>
-      {/* <TweetsPage /> */}
-      <Tweet />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route path="tweets" element={<TweetsPage />} />
+          <Route path="" element={<Home />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </BrowserRouter>
   );
 };
 

src/components/Home/Home.jsx

@@ -0,0 +1,7 @@
+import { Wrapper } from './Home.styled';
+
+const Home = () => {
+  return <Wrapper>Welcome to the tweets site!</Wrapper>;
+};
+
+export default Home;

src/components/Home/Home.styled.js

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+
+export const Wrapper = styled.h1`
+  font-size: 2.5rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #333;
+  margin-bottom: 2rem;
+  animation: fadeIn 2s ease-in-out;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+      transform: translate(-50%, -50%);
+    }
+  }
+`;

src/components/Layout/Layout.jsx

@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router-dom';
+import { AppNav, NavItem, NavLinkStyled, NavLinks } from './Layout.styled';
+
+const Layout = () => {
+  return (
+    <>
+      <AppNav>
+        <NavLinks>
+          <NavItem>
+            <NavLinkStyled to="/">Home</NavLinkStyled>
+          </NavItem>
+          <NavItem>
+            <NavLinkStyled to="/tweets">Tweets</NavLinkStyled>
+          </NavItem>
+        </NavLinks>
+      </AppNav>
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;

src/components/MainButton/MainButton.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledButton } from './MainButton.styled';
+
+const MainButton = ({ to }) => {
+  return <StyledButton to={to}> main</StyledButton>;
+};
+
+export default MainButton;

src/components/MainButton/MainButton.styled.js

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+import { NavLink } from 'react-router-dom';
+
+export const StyledButton = styled(NavLink)`
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  padding: 0.8rem 1.5rem;
+  text-align: center;
+  text-decoration: none;
+  display: block;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  margin: 10px;
+  margin-right: auto;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  text-transform: uppercase;
+  width: 50px;
+
+  &:hover {
+    background-color: #3e8e41;
+    color: white;
+  }
+`;