feat: create header for cell job placement

Platzi-Master-C8 · Jan 4, 2022 · cf340b1 · cf340b1
1 parent 545714e
commit cf340b1
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 4 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@master-c8/commons",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "private": false,
   "description": "Platzi Master C8 commons",
   "main": "./dist/index",
@@ -45,8 +45,8 @@
     }
   },
   "dependencies": {
-    "@master-c8/theme": "0.1.3",
-    "@master-c8/icons": "0.1.0",
+    "@master-c8/theme": "0.1.9",
+    "@master-c8/icons": "0.1.2",
     "prop-types": "15.7.2"
   },
   "publishConfig": {

diff --git a/packages/components/src/Header/Header.stories.js b/packages/components/src/Header/Header.stories.js
@@ -1,4 +1,5 @@
 import Header from './Header';
+import HeaderJob from './HeaderJob';
 
 export default {
   title: 'Design System/Commons/Header',
@@ -25,3 +26,5 @@ export const HeaderLogged = () => (
     <div>Children</div>
   </Header>
 );
+
+export const HeaderJobs = () => <HeaderJob />;
diff --git a/packages/components/src/Header/HeaderJob.js b/packages/components/src/Header/HeaderJob.js
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Avatar from '@mui/material/Avatar';
+
+import { Currency, BriefCase, Blog } from '@master-c8/icons';
+import { COLORS } from '@master-c8/theme';
+
+import Header from './Header';
+
+const HeaderJob = () => {
+  return (
+    <Header isLogged>
+      <MenuList sx={{ display: 'flex' }}>
+        <a
+          style={{ textDecoration: 'none' }}
+          href="https://platzi-master-c8.github.io/gethired-jobplacement-salaries-frontend/"
+        >
+          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
+            <ListItemIcon>
+              <Currency color="secondary" />
+            </ListItemIcon>
+            <Typography color="secondary" sx={{ fontSize: '13px' }}>
+              Salary Calculator
+            </Typography>
+          </MenuItem>
+        </a>
+        <a
+          style={{ textDecoration: 'none' }}
+          href="https://platzi-master-c8.github.io/gethired-jobplacement-ratings/"
+        >
+          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
+            <ListItemIcon sx={{ color: '#000' }}>
+              <Blog />
+            </ListItemIcon>
+            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
+              Raitings
+            </Typography>
+          </MenuItem>
+        </a>
+        <a
+          style={{ textDecoration: 'none' }}
+          href="https://platzi-master-c8.github.io/gethired-jobplacement-enterprise-Frontend/"
+        >
+          <MenuItem sx={{ flexDirection: 'column', gap: '5px' }}>
+            <ListItemIcon sx={{ color: '#000' }}>
+              <BriefCase />
+            </ListItemIcon>
+            <Typography color="text" sx={{ fontSize: '13px', color: '#000' }}>
+              Company
+            </Typography>
+          </MenuItem>
+        </a>
+        <MenuItem>
+          <Avatar sx={{ bgcolor: COLORS.secondary }}>J</Avatar>
+        </MenuItem>
+      </MenuList>
+    </Header>
+  );
+};
+
+export default HeaderJob;
diff --git a/packages/components/src/Header/index.js b/packages/components/src/Header/index.js
@@ -1 +1,2 @@
-export { default } from './Header';
+export { default } from './Header';
+export { default as HeaderJob } from './HeaderJob';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -1,2 +1,3 @@
 export { default as Logotype } from './Logotype';
 export { default as Header } from './Header';
+export { default as HeaderJob } from './Header/HeaderJob';