Sidebar, routing and logo

package-lock.json

@@ -13,6 +13,9 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1",
+        "react-router": "^6.6.2",
+        "react-router-dom": "^6.6.2",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3085,6 +3088,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14129,6 +14140,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14142,6 +14161,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
+      "integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
+      "integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -19029,6 +19078,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26905,6 +26959,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26915,6 +26975,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
+      "integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
+      "requires": {
+        "@remix-run/router": "1.2.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
+      "integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
+      "requires": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.2"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -8,6 +8,9 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "react-router": "^6.6.2",
+    "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

-import logo from './logo.svg';
+
 import './App.css';
+import './Components/Sidebar/Sidebar.css'
+import Sidebar from './Components/Sidebar/Sidebar.js'
+import {
+  createBrowserRouter,
+  Outlet
+} from "react-router-dom";
+import Subreddit from "./Pages/Subreddit"
+import Trends from "./Pages/Trends"
+import User from "./Pages/User"
+
+
+
+const SidebarLayout = () => (
+  <>
+  <Sidebar />
+  
+  <Outlet />
+  </>
+)
+
+  const router = createBrowserRouter([
+  {
+    element: <SidebarLayout  />,
+    children: [
+      {
+      path: "/",
+      element: <Subreddit />,
+    },
+    {
+      path: "trends",
+      element: <Trends />,
+    },
+    {
+      path: "user",
+      element: <User />,
+    },
+  ]
+
+  }
+  
+]);
+
+export default router;
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/Components/Sidebar/Sidebar.css

+.toolbar-logo {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+}
+
+.toolbar-logo-text {
+  font-weight: 700;
+}
+
+.toolbar-logo {
+  justify-content: space-between;
+}
+
+.sidebar {
+    background-color: #FF4500;
+    height: 80px;
+    width: 100%;
+    margin-top: 0;
+    display: flex;
+    position: sticky;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+
+
+  .menu-bars {
+    margin-right: 2rem;
+    font-size: 2rem;
+    background: none;
+    color: #000;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .menu-bars:hover {
+    color: rgb(74, 74, 74);
+  }
+  
+  .side-menu {
+    background-color: rgba(228, 228, 228, 0.3);
+    width: 250px;
+    height: 100vh;
+    display: inline-block;
+    justify-content: right;
+    position: fixed;
+    top: 80px;
+    right: -100%;
+    transition: 850ms;
+  }
+  
+  .side-menu.active {
+    right: 0;
+    transition: 450ms;
+    background-color: rgba(228, 228, 228, 0.3);
+  }
+  
+  .side-text {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 8px 0px 8px 0px;
+    list-style: none;
+    height: 60px;
+  }
+  
+  .side-text a {
+    text-decoration: none;
+    color: #151414;
+    font-size: 18px;
+    font-family: Helvetica, sans-serif;
+    width: 95%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    border-radius: 10px;
+  }
+  
+  .side-text a:hover {
+    background-color: #FF4500;
+    color: #fff;
+  }
+  
+  .side-menu-items {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  
+  .sidebar-toggle {
+    background-color: rgba(228, 228, 228, 0.0);
+    width: 100%;
+    height: 80px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  
+  span {
+    margin-left: 16px;
+  }
\ No newline at end of file

src/Components/Sidebar/Sidebar.js

+import React, {useState} from 'react';
+import * as FaIcons from  'react-icons/fa';
+import * as AiIcons from  'react-icons/ai';
+import { Link } from 'react-router-dom';
+import { SidebarData } from "./SidebarData";
+import "./Sidebar.css";
+import { IconContext } from 'react-icons';
+import {ReactComponent as RedditLogo} from '../../Resources/logo.svg'
+
+function Sidebar() {
+  const [sidebar, setSidebar] = useState(false);
+
+  const showSidebar = () => setSidebar(!sidebar);
+  return (
+    <>
+    <IconContext.Provider value = {{ color: "undefined"}}>
+    <div className="sidebar">
+
+
+    <div className='toolbar-logo'><RedditLogo/><h1 className='toolbar-logo-text'>Trenddit</h1></div>
+
+        <Link to="#" className="menu-bars">
+            <FaIcons.FaBars onClick = {showSidebar}/>
+        </Link>
+        </div>
+      <nav className= {sidebar ? "side-menu active" : "side-menu"}>
+        <ul className ="side-menu-items" onClick = {showSidebar}>
+          <li className='sidebar-toggle'>
+            <Link to="#" className="menu-bars">
+              <AiIcons.AiOutlineClose />
+            </Link>
+          </li>
+          {SidebarData.map ((item,index) => {
+            return (
+              <li key={index} className= {item.cName}>
+                <Link to={item.path}>
+                {item.icons}
+                  <span>
+                    {item.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </nav>
+
+    </IconContext.Provider>
+
+      
+    </>
+  )
+}
+
+export default Sidebar

src/Components/Sidebar/SidebarData.js

+import React from 'react';
+import * as FaIcons from  'react-icons/fa';
+import * as AiIcons from  'react-icons/ai';
+import * as IoIcons from  'react-icons/io';
+import * as BsIcons from  'react-icons/bs';
+import * as IoLogos from  'react-icons/io';
+import * as BiLogos from  'react-icons/bi';
+
+export const SidebarData = [
+    {
+        title: "Subreddit",
+        path: "/",
+        icons: <IoLogos.IoLogoReddit />,
+        cName: "side-text"
+    },
+    {
+        title: "Trends",
+        path: "/trends",
+        icons: <BsIcons.BsGraphUp />,
+        cName: "side-text"
+    },
+    {
+        title: "User",
+        path: "/user",
+        icons: <AiIcons.AiOutlineUser />,
+        cName: "side-text"
+    },
+    {
+        title: "Logout",
+        path: "/logout",
+        icons: <BiLogos.BiLogOut />,
+        cName: "side-text"
+    }
+    
+]

src/Pages/Home.js

+import React from 'react'
+
+function Home() {
+    return ( <div><h1>Home</h1></div>)
+}
+
+
+export default Home;
\ No newline at end of file

src/Pages/Subreddit.js

+import React from 'react'
+
+function Subreddit() {
+    return ( <div><h1>Subreddit</h1></div>)
+}
+
+
+export default Subreddit;
\ No newline at end of file

src/Pages/Trends.js

+import React from 'react'
+
+function Trends() {
+    return ( <div><h1>Trends</h1></div>)
+}
+
+
+export default Trends;
\ No newline at end of file

src/Pages/User.js

+import React from 'react'
+
+function User() {
+    return ( <div><h1>User</h1></div>)
+}
+
+
+export default User;
\ No newline at end of file

src/Resources/logo.svg

+<svg width="118" height="54" viewBox="0 0 118 54" fill="none" 
+xmlns="http://www.w3.org/2000/svg">
+<path d="M108 17C108 7.61116 99.7173 0 89.5 0C79.2827 0 71 7.61116 71 
+17C71 26.3888 79.2827 34 89.5 34C99.7173 34 108 26.3888 108 17Z" 
+fill="black"/>
+<path d="M98.3 9.71813C99.1284 9.71813 99.8 9.10243 99.8 8.34292C99.8 
+7.58341 99.1284 6.96771 98.3 6.96771C97.4716 6.96771 96.8 7.58341 96.8 
+8.34292C96.8 9.10243 97.4716 9.71813 98.3 9.71813Z" fill="#E4E4E4"/>
+<path d="M99 18.1527C100.215 18.1527 101.2 17.2497 101.2 16.1357C101.2 
+15.0218 100.215 14.1188 99 14.1188C97.785 14.1188 96.8 15.0218 96.8 
+16.1357C96.8 17.2497 97.785 18.1527 99 18.1527Z" fill="#E4E4E4"/>
+<path d="M79 18.1527C80.215 18.1527 81.2 17.2497 81.2 16.1357C81.2 15.0218 
+80.215 14.1188 79 14.1188C77.785 14.1188 76.8 15.0218 76.8 16.1357C76.8 
+17.2497 77.785 18.1527 79 18.1527Z" fill="#E4E4E4"/>
+<path d="M88.7 26.0373C95.2722 26.0373 100.6 23.164 100.6 19.6197C100.6 
+16.0753 95.2722 13.202 88.7 13.202C82.1278 13.202 76.8 16.0753 76.8 
+19.6197C76.8 23.164 82.1278 26.0373 88.7 26.0373Z" fill="#FFFDFD"/>
+<path d="M86.8 18.1528C86.8 19.0642 85.9941 19.803 85 19.803C84.0059 
+19.803 83.2 19.0642 83.2 18.1528C83.2 17.2413 84.0059 16.5025 85 
+16.5025C85.9941 16.5025 86.8 17.2413 86.8 18.1528Z" fill="black"/>
+<path d="M93 19.803C93.9941 19.803 94.8 19.0642 94.8 18.1528C94.8 17.2413 
+93.9941 16.5025 93 16.5025C92.0059 16.5025 91.2 17.2413 91.2 18.1528C91.2 
+19.0642 92.0059 19.803 93 19.803Z" fill="black"/>
+<path d="M85 22.4887C85 22.4887 86.4226 23.7271 89.3875 23.6573C92.3524 
+23.5874 92.7656 22.3701 92.7656 22.3701" stroke="black" 
+stroke-width="3.45" stroke-linecap="round"/>
+<path d="M88.2 14.0627L89.9081 7.22876" stroke="#E4E4E4" 
+stroke-width="2.76" stroke-linecap="round"/>
+<path d="M90 7.23836C90.2224 7.1808 98.3872 8.29725 98.3872 8.29725" 
+stroke="#E4E4E4" stroke-width="2.76" stroke-linecap="round"/>
+<path d="M117.438 37.0371L112.305 35.0989C111.548 34.8132 110.314 34.8102 
+109.549 35.0924C108.783 35.3744 108.775 35.8346 109.531 36.1203L111.387 
+36.8209H1.9493C0.872785 36.8209 0 37.1463 0 37.5478C0 37.9493 0.872785 
+38.2746 1.9493 38.2746H111.387L109.531 38.9753C108.775 39.2608 108.782 
+39.7211 109.548 40.0031C109.928 40.1429 110.423 40.2127 110.918 
+40.2127C111.421 40.2127 111.924 40.1406 112.305 39.9966L117.438 
+38.0583C118.187 37.7754 118.187 37.3202 117.438 37.0371Z" fill="#808080"/>
+<path d="M84.332 49.2032C83.5744 49.2032 82.8851 49.0395 82.565 
+48.7833L55.9311 27.4568L50.1323 30.5111C49.7294 30.7233 49.0532 30.8394 
+48.3588 30.8147C47.6644 30.7904 47.058 30.6296 46.7681 30.3929L37.2295 
+22.6017L17.2573 37.5569C16.7772 37.9164 15.6071 38.0625 14.6435 
+37.8835C13.6802 37.7045 13.2877 37.2681 13.7675 36.9089L35.5609 
+20.5899C35.896 20.3391 36.5929 20.1801 37.3385 20.1871C38.0898 20.1918 
+38.7669 20.3572 39.0788 20.6121L48.9073 28.6401L54.6893 25.5948C55.0906 
+25.3833 55.7642 25.267 56.4556 25.2909C57.1477 25.3143 57.7541 25.4731 
+58.0472 25.7081L84.2983 46.7277L95.5 37.4121C95.9404 37.0457 97.0951 
+36.8823 98.0762 37.0462C99.0585 37.2104 99.498 37.6406 99.0573 
+38.0069L86.1107 48.7738C85.7987 49.0334 85.1089 49.2012 84.346 
+49.2033C84.3412 49.2032 84.3363 49.2032 84.332 49.2032Z" fill="black"/>
+<path d="M21.7562 12.1236L16.5582 10.2097C15.7991 9.93011 14.5783 9.93011 
+13.8191 10.2097L8.62111 12.1236C7.85503 12.4056 7.84719 12.8658 8.60359 
+13.1515C9.35999 13.4371 10.5942 13.4401 11.36 13.158L13.239 
+12.466V53.2731C13.239 53.6746 14.1118 54 15.1883 54C16.2648 54 17.1376 
+53.6746 17.1376 53.2731V12.466L19.0166 13.158C19.3964 13.2978 19.8915 
+13.3676 20.3861 13.3676C20.8892 13.3676 21.3918 13.2955 21.7733 
+13.1515C22.5299 12.8658 22.5223 12.4056 21.7562 12.1236Z" fill="#808080"/>
+</svg>

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import router from './App';
+import {RouterProvider} from 'react-router-dom';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/logo.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file

src/reportWebVitals.js

-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/setupTests.js

-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';