feat: add search bar and icons from previous version to header

striker-ui/components/organisms/Header.tsx

@@ -1,9 +1,8 @@
-import { FunctionComponent } from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { Grid } from '@material-ui/core';
 import Image from 'next/image';
-
+import { ICONS, ICON_SIZE } from '../../lib/consts/ICONS';
-// import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -11,18 +10,40 @@ const useStyles = makeStyles((theme) =>
       paddingTop: theme.spacing(0.5),
       paddingBottom: theme.spacing(0.5),
       paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(0.5),
+      paddingRight: theme.spacing(3),
+    },
+    input: {
+      height: '40px',
+      width: '500px',
+      backgroundColor: theme.palette.secondary.main,
+      borderRadius: '3px',
     },
   }),
 );
 
-const Header: FunctionComponent = () => {
+const Header = (): JSX.Element => {
   const classes = useStyles();
   return (
     <AppBar position="static" className={classes.appBar}>
-      <div>
+      <Grid container alignItems="center" justify="space-between">
+        <Grid>
           <Image src="/pngs/logo.png" width="160" height="40" />
-      </div>
+        </Grid>
+        <Grid>
+          <input className={classes.input} list="search-suggestions" />
+        </Grid>
+        <Grid>
+          {ICONS.map(
+            (icon): JSX.Element => (
+              <Image
+                key="icon"
+                src={icon} // eslint-disable-next-line react/jsx-props-no-spreading
+                {...ICON_SIZE}
+              />
+            ),
+          )}
+        </Grid>
+      </Grid>
     </AppBar>
   );
 };

striker-ui/lib/consts/ICONS.ts

@@ -0,0 +1,15 @@
+export const ICONS = [
+  '/pngs/files_on.png',
+  '/pngs/tasks_no-jobs_icon.png',
+  '/pngs/configure_icon_on.png',
+  '/pngs/striker_icon_on.png',
+  '/pngs/anvil_icon_on.png',
+  '/pngs/email_on.png',
+  '/pngs/users_icon_on.png',
+  '/pngs/help_icon_on.png',
+];
+
+export const ICON_SIZE = {
+  width: 40,
+  height: 40,
+};