Challenge one

package.json

@@ -8,9 +8,11 @@
     "@testing-library/user-event": "^12.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.2.0",
     "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",
@@ -45,17 +47,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "lint-staged": {
-    "*.{js, jsx, css, json}": [
-      "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
   }
 }

src/components/App/App.component.jsx

@@ -9,6 +9,8 @@ import SecretPage from '../../pages/Secret';
 import Private from '../Private';
 import Fortune from '../Fortune';
 import Layout from '../Layout';
+import MainHeader from '../Header';
+
 import { random } from '../../utils/fns';
 
 function App() {
@@ -32,15 +34,16 @@ function App() {
 
   return (
     <BrowserRouter>
+      <MainHeader />
       <AuthProvider>
         <Layout>
           <Switch>
             <Route exact path="/">
               <HomePage />
             </Route>
-            <Route exact path="/login">
-              <LoginPage />
-            </Route>
+            // <Route exact path="/login">
+            //   <LoginPage />
+            // </Route>
             <Private exact path="/secret">
               <SecretPage />
             </Private>

src/components/Header/Header.component.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Col, Header, LogIcon, LoginContainer, MenuIcon, Row } from './Header.styles';
+import { ToggleSwitch } from '../atoms';
+import { SearchBar } from '../molecules';
+
+const MainHeader = () => {
+  const [isToggled, setIsToggled] = useState(false);
+
+  return (
+    <Header darkMode={isToggled}>
+      <Row>
+        <Col size={1}>
+          <MenuIcon />
+        </Col>
+        <Col size={4}>
+          <SearchBar />
+        </Col>
+        <Col size={1}>
+          <ToggleSwitch
+            id="test-switch"
+            toggled={isToggled}
+            onChange={(e) => setIsToggled(e.target.checked)}
+          />
+        </Col>
+        <Col size={1}>
+          <LoginContainer>
+            <Link to="/login">
+              Login <LogIcon />
+            </Link>
+          </LoginContainer>
+        </Col>
+      </Row>
+    </Header>
+  );
+};
+
+export default MainHeader;

src/components/Header/Header.styles.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { VscMenu, VscSymbolBoolean } from 'react-icons/vsc';
+
+export const Header = styled.header`
+  display: flex;
+  width: 100vw;
+  min-height: 70px;
+  padding: 17px 17px;
+  background: linear-gradient(#beeaf5, #80d9df);
+  margin-bottom: 1rem;
+  justify-content: space-between;
+  margin-bottom: 2.5rem;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  align-items: center;
+`;
+
+export const Col = styled.div`
+  flex: ${(props) => props.size};
+  // border: 2px solid;
+  // border-color: blue;
+`;
+
+export const MenuIcon = styled(VscMenu)`
+  display: block;
+  font-size: 26px;
+  margin-right: 20px;
+  margin-left: 30px;
+  color: #6c56a3;
+  border: none;
+  cursor: not-allowed;
+`;
+
+export const LoginContainer = styled.div`
+  display: block;
+  flex-direction: row;
+  align-text: center;
+`;
+// color: #F894F1; pink
+
+export const LogIcon = styled(VscSymbolBoolean)`
+  font-size: 27px;
+  margin-right: 20px;
+  color: #6c56a3;
+  border: none;
+  transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  margin-left: 0.2em;
+`;

src/components/Header/index.js

@@ -0,0 +1 @@
+export { default } from './Header.component';

src/components/Layout/Layout.styles.css

@@ -3,7 +3,6 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   margin-top: -3rem;
 }

src/components/atoms/Thumbnail/Thumbnail.atom.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { ThumbnailImg } from './Thumbnail.styles.js';
+
+const Thumbnail = ({ bg = null }) => {
+  return <ThumbnailImg>{bg}</ThumbnailImg>;
+};
+
+export default Thumbnail;

src/components/atoms/Thumbnail/Thumbnail.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const ThumbnailImg = styled.div`
+  display: block;
+  height: 170px;
+  width: 100%;
+  background: url(${(props) => props.bg}) no-repeat;
+  background-size: cover;
+  background-position: center;
+  border-radius: 4px 4px 0 0;
+  overflow: hidden;
+  text-align: center;
+  background-color: #ffffff;
+  border: 1px solid white;
+`;

src/components/atoms/ToggleSwitch/ToggleSwitch.atoms.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SwitchInput, SwitchLabel, SwitchButton } from './ToggleSwitch.styles';
+
+const ToggleSwitch = ({ id, toggled, onChange }) => {
+  return (
+    <>
+      <SwitchInput id={id} type="checkbox" checked={toggled} onChange={onChange} />
+      <SwitchLabel htmlFor={id}>
+        <SwitchButton />
+      </SwitchLabel>
+    </>
+  );
+};
+
+export default ToggleSwitch;

src/components/atoms/ToggleSwitch/ToggleSwitch.styles.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const SwitchInput = styled.input`
+  height: 0;
+  width: 0;
+  visibility: hidden;
+`;
+
+export const SwitchLabel = styled.label`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: not-allowed;
+  width: 40px;
+  height: 20px;
+  border-radius: 50px;
+  border: 1px solid #6c56a3;
+  position: relative;
+  transition: background-color 0.2s;
+`;
+
+export const SwitchButton = styled.span`
+  content: '';
+  position: absolute;
+  top: 1x;
+  left: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 22.5px;
+  transition: 0.2s;
+  background: #6c56a3;
+  box-shadow: 0 0 1px 0 rgba(10, 10, 10, 0.29);
+  ${SwitchInput}:checked + ${SwitchLabel} & {
+    left: calc(100% - 1px);
+    transform: translateX(-100%);
+  }
+
+  ${SwitchLabel}:active & {
+    width: 22.5px;
+  }
+`;

src/components/atoms/VideoInfo/VideoInfo.atom.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { VideoDescription, VideoInfo, VideoTitle } from './VideoInfo.styles';
+
+const VideoInformation = ({ title = null, description = null }) => {
+  return (
+    <VideoInfo>
+      <VideoTitle>{title}</VideoTitle>
+      <VideoDescription>{description}</VideoDescription>
+    </VideoInfo>
+  );
+};
+
+export default VideoInformation;

src/components/atoms/VideoInfo/VideoInfo.styles.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const VideoInfo = styled.div`
+  display: block;
+  margin: 0.5rem;
+`;
+
+export const VideoTitle = styled.p`
+  font-size: 14px;
+  font-weight: 600;
+  color: #6c56a3;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  overflow: hidden;
+  text-align: left;
+  margin: 10px 0 8px;
+`;
+
+export const VideoDescription = styled.p`
+  font-size: 12px;
+  color: #262626;
+  font-weight: 400;
+  font-family: 'Open Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
+    Geneva, Verdana, sans-serif;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left;
+  margin: 0;
+`;

src/components/atoms/index.js

@@ -0,0 +1,5 @@
+import ToggleSwitch from './ToggleSwitch/ToggleSwitch.atoms';
+import Thumbnail from './Thumbnail/Thumbnail.atom';
+import VideoInformation from './VideoInfo/VideoInfo.atom';
+
+export { ToggleSwitch, Thumbnail, VideoInformation };

src/components/molecules/SearchBar/SearchBar.molecule.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, Form, Input, SearchContainer, SearchIcon } from './SearchBar.styles';
+
+const SearchBar = () => {
+  return (
+    <SearchContainer>
+      <Form>
+        <Input type="text" id="name" placeholder="Ask for a video..." />
+        <Button>
+          <SearchIcon />
+        </Button>
+      </Form>
+    </SearchContainer>
+  );
+};
+
+export default SearchBar;

src/components/molecules/SearchBar/SearchBar.styles.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { VscSearch } from 'react-icons/vsc';
+
+export const SearchContainer = styled.section`
+  display: flex;
+  flex-direction: row;
+  align-items: left;
+`;
+
+export const SearchIcon = styled(VscSearch)`
+  display: block;
+  font-size: 20px;
+  color: #6c56a3;
+  border: none;
+  cursor: not-allowed;
+`;
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const Input = styled.input`
+  padding: 0.4rem 0.6rem;
+  width: 80%;
+  height: 35px;
+  margin: 0.2em 0;
+  color: #f894f1;
+  font-weight: 600;
+  font-size: 0.8rem;
+  background: white;
+  border: 2px solid;
+  border-color: #6c56a3;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+`;
+
+export const Button = styled.button`
+  width: 20%;
+  height: 35px;
+  margin: 0.2em 0;
+  margin-left: -0.2em;
+  padding: 0.35rem 0.5rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border: 2px solid;
+  border-color: #6c56a3;
+  align-items: center;
+  justify-content: center;
+`;
+
+/* background-color: rgba(0, 0, 0, 0.1); */

src/components/molecules/VideoCard/VideoCard.molecule.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CardContainer, TextContainer } from './VideoCard.styles';
+import { Thumbnail, VideoInformation } from '../../atoms';
+
+function VideoCard({ videos }) {
+  return (
+    <CardContainer>
+      <Thumbnail bg={<img src={videos.snippet.thumbnails.medium.url} />} />
+      <TextContainer>
+        <VideoInformation
+          title={videos.snippet.title}
+          description={videos.snippet.description}
+        />
+      </TextContainer>
+    </CardContainer>
+  );
+}
+
+export default VideoCard;