Mini challenge 1

package.json

@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -12,6 +12,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/App/App.component.jsx

@@ -1,57 +1,32 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
-import AuthProvider from '../../providers/Auth';
-import HomePage from '../../pages/Home';
-import LoginPage from '../../pages/Login';
-import NotFound from '../../pages/NotFound';
-import SecretPage from '../../pages/Secret';
-import Private from '../Private';
-import Fortune from '../Fortune';
-import Layout from '../Layout';
-import { random } from '../../utils/fns';
+import React from 'react';
+import Navbar from "../Navbar/Navbar";
+import CardItem from "../CardItem"
+import data from "../youtube-videos-mock.json"
+import '../Navbar/Navbar.css'
+
+
 
 function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
+
+  return (
+    <div>
+      <Navbar>
 
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
+      </Navbar>
 
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
+      <div className="cards">
+        {data.items.map((data, i)=>(
+          <CardItem
+            sprite={data.snippet.thumbnails.default.url}
+            name={data.snippet.title}
+            description={data.snippet.description}
 
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+          ></CardItem>
+        ))}
+        
+      </div>
+    </div>
 
-  return (
-    <BrowserRouter>
-      <AuthProvider>
-        <Layout>
-          <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
-            <Route exact path="/login">
-              <LoginPage />
-            </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
-            <Route path="*">
-              <NotFound />
-            </Route>
-          </Switch>
-          <Fortune />
-        </Layout>
-      </AuthProvider>
-    </BrowserRouter>
   );
 }
 

src/components/CardItem.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function CardItem({ name, sprite, description }) {
+  return (
+    <div className="card-item">
+      <img src={sprite} alt=""/>
+      <h2>{name}</h2>
+      <h3>{description}</h3>
+    </div>
+  );
+}
+
+export default CardItem;

src/components/Navbar/Button.css

@@ -0,0 +1,46 @@
+:root {
+    --primary: #3acbf7;
+}
+
+.btn {
+    padding: 8px 20px;
+    border-radius: 4px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+}
+
+.btn:hover {
+    padding: 8px 20px;
+    transition: all 0.3s ease-out;
+    background: #fff;
+    color: #6568F4;
+    transition: 250ms;
+}
+
+.btn--primary {
+    background-color: var(--primary);
+}
+
+.btn--outline {
+    background-color: transparent;
+    color: #fff;
+    padding: 8px 20px;
+    border-radius: 4px;
+    border: 1px solid var(--primary);
+    transition: all 0.3s ease-out;
+}
+
+.btn--medium {
+    padding: 8px 20px;
+    border-radius: 4px;
+    font-size: 18px;
+    color: #fff;
+}
+
+.btn-large {
+    padding: 12px 26px;
+    border-radius: 4px;
+    font-size: 20px;
+    color: #fff;
+}

src/components/Navbar/Button.js

@@ -0,0 +1,12 @@
+import './Button.css'
+import styled from 'styled-components'
+
+export const Button = styled.button`
+background: transparent;
+border-radius: 3px;
+border: 2px solid white;
+color: white;
+margin: 0 1em;
+padding: 0.25em 1em;
+cursor:pointer;
+`;

src/components/Navbar/Navbar.css

@@ -0,0 +1,199 @@
+.NavbarItems {
+    background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73,63,252,1) 100%);
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.2rem;
+}
+
+.navbar-logo {
+    color: rgb(255, 255, 255);
+    justify-self: start;
+    margin-left: 20px;
+    cursor: pointer;
+}
+
+.navbar-search{
+   position:absolute;
+   width:300px;
+   height: 30px;
+   color: gray;
+   border:"none";
+   padding:"10px";
+   border-radius: 6px;
+   font-size:medium;
+
+
+}
+::placeholder{
+    color: gray;
+    text-align: center;
+}
+
+.fa-react {
+    margin-left: 0.5rem;
+    font-size: 1.6rem;
+}
+
+.nav-menu {
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    grid-gap: 10px;
+    list-style: none;
+    text-align: center;
+    width: 70vw;
+    justify-content: end;
+    margin-right: 2rem;
+}
+
+.nav-links {
+    color: white;
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+}
+
+.nav-links:hover {
+    background-color: #6d76f7;
+    border-radius: 4px;
+    transition: all 0.2s ease-out;
+}
+
+.fa-bars {
+    color: #fff;
+}
+
+.nav-links-mobile {
+    display: none;
+}
+
+.menu-icon {
+    display: none;
+}
+
+div.card-item {
+    height: 200px;
+    background-color: white;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    margin: 10px;
+    flex-basis: calc(20% - 22px);
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    cursor: pointer;
+
+  }
+
+  .card-item > h2 {
+    color: black;
+    font-size: 1em;
+  }
+
+  .card-item > h3 {
+    color: gray;
+    font-size:small;
+    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  div.cards {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+
+@media screen and (max-width: 1240px) {
+    .NavbarItems {
+        position: relative;
+    }
+
+    .nav-menu {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 500px;
+        position: absolute;
+        top: 80px;
+        left: -100%;
+        opacity: 1;
+        transition: all 0.5s ease;
+    }
+
+    .nav-menu.active {
+        background: #6668f4;
+        left: 0;
+        opacity: 1;
+        transition: all 0.5s ease;
+        z-index: 1;
+    }
+
+    .nav-links {
+        text-align: center;
+        padding: 2rem;
+        width: 100%;
+        display: table;
+    }
+
+    .nav-links:hover {
+        background-color: #7577fa;
+        border-radius: 0;
+    }
+
+    .navbar-logo {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: translate(25%, 50%);
+    }
+
+    .menu-icon {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(-100%, 60%);
+        font-size: 1.8rem;
+        cursor: pointer;
+    }
+
+    .fa-times {
+        color: #fff;
+        font-size: 2rem;
+    }
+
+    .nav-links-mobile {
+        display: block;
+        text-align: center;
+        padding: 1.5rem;
+        margin: 2rem auto;
+        border-radius: 4px;
+        width: 80%;
+        background: #4ad9e4;
+        text-decoration: none;
+        color: #fff;
+        font-size: 1.5rem;
+    }
+
+    .nav-links-mobile:hover {
+        background: #fff;
+        color: #6568F4;
+        transition: 250ms;
+    }
+
+    Button {
+        display: none;
+
+    }
+
+    .navbar-search{
+
+        width:230px;
+        height: 30px;
+        color: gray;
+        border:"none";
+        padding:"0.5rem";
+        border-radius: 6px;
+        font-size:medium;
+        margin-left: 100px;
+    }
+}