Minor - Mini-Challenge 1: Core Concepts and Styling

src/components/Layout/Content.component.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { BlockElement, ContentWrapper, Description, VideoThumbnail } from './Content.styles';
+
+let data = require('../../mockdata/youtube-videos-mock.json');
+
+function ContentComponent() {
+    console.log(data.items.lenght)
+    const element = data && data.items.map((item)=>(
+        <BlockElement>
+            <VideoThumbnail src={item.snippet.thumbnails.medium.url} title={item.snippet.title} />
+            <Description>
+                <h3>{item.snippet.title}</h3>
+                <div>{item.snippet.description}</div>
+            </Description>
+        </BlockElement>
+
+    ))
+    return (
+        <ContentWrapper>
+            {element}
+        </ContentWrapper>
+    )
+}
+
+export default ContentComponent;

src/components/Layout/Content.styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const BlockElement = styled.div`
+    flex: 1 0 21%;
+    margin: 15px;
+    background-color: white;
+    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+    border-radius: 4px;
+    overflow: hidden;
+`;
+export const ContentWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    width: 90%;
+    row-gap: 10px;
+    column-gap: 2em;
+`;
+
+export const Description = styled.div`
+    padding: 10px;
+`;
+
+export const VideoThumbnail = styled.img`
+    width: 100%;
+`;

src/components/Layout/Header.component.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { ButtonToggle, HeaderWrapper, Input, LogoLink, MenuToggle } from './Header.styles';
+// import InsideSessionLogo from '../../resources/logo.png'; // TODO: Uncomment when login is ready
+import SessionOutLogo from '../../resources/session_out.png';
+import { faBars, faToggleOff } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+function HeaderComponent() {
+  return (
+    <HeaderWrapper>
+      <Input type='text' placeholder={'Wizleine'}/>
+      <ButtonToggle>
+        <FontAwesomeIcon icon={faToggleOff} size="6x" style={{ color: 'white'}}/>
+      </ButtonToggle>
+      Dark Mode
+      <LogoLink href="#">
+        <img src={SessionOutLogo} alt="Logo" />
+      </LogoLink>
+      <MenuToggle href="#">
+        <FontAwesomeIcon icon={faBars} size="6x" style={{ color: 'white'}}/>
+      </MenuToggle>
+    </HeaderWrapper>
+  );
+}
+
+export default HeaderComponent;

src/components/Layout/Header.styles.js

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  padding: 10px 0px;
+  width: 100%;
+  background-color: blue;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
+`;
+
+export const LogoLink = styled.div`
+    padding-right: 10px;
+    img {
+        max-width: 50px;
+        height: auto;
+    }
+`;
+
+export const MenuToggle = styled.div`
+    display: block;
+    width: 50px;
+    padding: 5px;
+    margin-right: 10px;
+    svg{
+        height: auto;
+        max-width: 100%;
+    }
+`;
+
+export const ButtonToggle = styled.div`
+    display: block;
+    margin-left: auto;
+    width: 30px;
+    margin-right: 10px;
+    svg{
+        height: auto;
+        max-width: 100%;
+    }
+`;
+
+export const Input = styled.input`
+  font-size: 16px;
+  border: solid 1px #dbdbdb;
+  border-radius: 3px;
+  color: #262626;
+  padding: 7px 33px;
+  border-radius: 3px;
+  color: #999;
+  cursor: text;
+  font-size: 14px;
+  font-weight: 300;
+  text-align: center;
+  background: #fafafa;
+
+  &:active,
+  &:focus {
+    text-align: left;
+  }
+`;
+
+export const MenuLink = styled.a``;

src/components/Layout/Layout.styles.css

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

src/components/Layout/__tests__/Header.component.test.js

@@ -0,0 +1,7 @@
+import HeaderComponent from '../Header.component';
+
+describe('Header Component', () => {
+    it('Should show HeaderComponent', () => {
+
+    });
+});