Toolbar and header

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,

src/common/Button/index.tsx

@@ -28,6 +28,7 @@ const Button: React.FC<Props> = ({
     {icons ? (
       icons.map((icon, index) => (
         <FontAwesomeIcon
+          key={index}
           icon={icon}
           className={classNames({
             [iconClasses[index] as string]: iconClasses[index]

src/common/Input/index.module.scss

@@ -0,0 +1,2 @@
+.input {
+}

src/common/Input/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styles from './index.module.scss';
+
+interface Props {
+  placeholder: string;
+  leftIcon: any;
+  rightIcon: any;
+  rightIconClick: () => void;
+}
+
+const Input: React.FC<Props> = ({ placeholder, leftIcon, rightIcon, rightIconClick }) => {
+  const iconClick = rightIconClick
+    ? {
+        onClick: rightIconClick
+      }
+    : {};
+  return (
+    <div className={styles.input}>
+      {leftIcon && <FontAwesomeIcon icon={leftIcon} />}
+      <input type="text" placeholder={placeholder} />
+      {rightIcon && <FontAwesomeIcon icon={rightIcon} {...iconClick} />}
+    </div>
+  );
+};
+
+export default Input;

src/pages/Layout/Header/index.module.scss

@@ -1,9 +1,9 @@
 @import '../../../static/styles/vars';
 
 .header {
-  position: fixed;
-  top: 0;
-  left: 0;
+  // position: fixed;
+  // top: 0;
+  // left: 0;
 
   svg {
     color: $color-white;

src/pages/Layout/Header/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+import { faUserCircle, faSearch, faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import Input from '../../../common/Input';
 import styles from './index.module.scss';
 
 interface Props {
@@ -10,6 +11,12 @@ interface Props {
 const Header: React.FC<Props> = ({ setToggleMenu }) => (
   <header className={styles.header}>
     <FontAwesomeIcon icon={faUserCircle} size="5x" onClick={setToggleMenu} />
+    <Input
+      placeholder="Search"
+      leftIcon={faSearch}
+      rightIcon={faUserPlus}
+      rightIconClick={() => {}}
+    />
   </header>
 );
 

src/pages/Layout/Toolbar/index.module.scss

@@ -0,0 +1,21 @@
+.toolbar {
+  color: white;
+  padding: 5px 10px 10px;
+
+  display: grid;
+  grid-template-columns: 50% 50%;
+
+  article {
+  }
+
+  svg {
+    color: white;
+    margin-left: 8px;
+  }
+
+  .left {
+  }
+  .right {
+    text-align: right;
+  }
+}

src/pages/Layout/Toolbar/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faLocationArrow,
+  faSignal,
+  faBatteryHalf
+} from '@fortawesome/free-solid-svg-icons';
+import styles from './index.module.scss';
+
+const Toolbar: React.SFC<{}> = () => {
+  const { useState } = React;
+  const [time, setTime] = useState<string>();
+
+  const updateTime = () => {
+    const time = new Date().toLocaleTimeString('en-us', {
+      hour: 'numeric',
+      minute: '2-digit'
+    });
+    setTime(time);
+  };
+
+  setInterval(updateTime, 1000);
+
+  return (
+    <div className={styles.toolbar}>
+      <article className={styles.left}>
+        <time>{time}</time>
+        <FontAwesomeIcon icon={faLocationArrow} />
+      </article>
+      <article className={styles.right}>
+        <FontAwesomeIcon icon={faSignal} />
+        <FontAwesomeIcon icon={faBatteryHalf} />
+      </article>
+    </div>
+  );
+};
+
+export default Toolbar;

src/pages/Layout/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Toolbar from './Toolbar';
 import Header from './Header';
 import Footer from './Footer';
 import Menu from './Menu';
@@ -14,6 +15,7 @@ const Layout: React.FC<Props> = ({ children }) => {
 
   return (
     <div className={styles.menu}>
+      <Toolbar />
       <Header setToggleMenu={() => setToggleMenu(!toggleMenu)} />
       <section className={styles.wrapper}>{children}</section>
       <Menu

src/static/styles/global.scss

@@ -16,7 +16,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  background-color: #222;
+  background-color: #333;
 }
 
 a {