add education page

cypress/integration/router.spec.js

@@ -36,6 +36,11 @@ describe('App Router', () => {
     cy.get('section');
   });
 
+  it('contains Add Education page', () => {
+    cy.visit(ROUTES.ADD_EDUCATION);
+    cy.get('section');
+  });
+
   it('contains Dashboard page', () => {
     cy.visit(ROUTES.DASHBOARD);
     cy.get('section');

src/components/Header.tsx

@@ -1,6 +1,10 @@
 import React, {FC} from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faUser, faCodeBranch} from '@fortawesome/free-solid-svg-icons';
+import {
+  faUser,
+  faCodeBranch,
+  faGraduationCap,
+} from '@fortawesome/free-solid-svg-icons';
 import {faConnectdevelop} from '@fortawesome/free-brands-svg-icons';
 
 interface IProps {
@@ -20,6 +24,9 @@ const Header: FC<IProps> = ({title, lead, icon = 'faUser'}) => {
     if (icon === 'code-branch') {
       return <FontAwesomeIcon icon={faCodeBranch} />;
     }
+    if (icon === 'graduation-cap') {
+      return <FontAwesomeIcon icon={faGraduationCap} />;
+    }
   };
 
   return (

src/constants/routes.ts

@@ -10,3 +10,4 @@ export const PROFILE: string = '/profile';
 export const EDIT_PROFILE: string = '/edit-profile';
 export const DASHBOARD: string = '/dashboard';
 export const ADD_EXPERIENCE: string = '/add-experience';
+export const ADD_EDUCATION: string = '/add-education';

src/pages/AddEducation.tsx

@@ -0,0 +1,62 @@
+import React, {FC} from 'react';
+import FormHeader from '../components/FormHeader';
+
+const AddEducation: FC = () => (
+  <section className="container">
+    <FormHeader
+      title="Add Your Education"
+      lead="Add any school, bootcamp, etc that
+        you have attended"
+      icon="graduation-cap"
+    />
+
+    <form className="form">
+      <div className="form-group">
+        <input
+          type="text"
+          placeholder="* School or Bootcamp"
+          name="school"
+          required
+        />
+      </div>
+      <div className="form-group">
+        <input
+          type="text"
+          placeholder="* Degree or Certificate"
+          name="degree"
+          required
+        />
+      </div>
+      <div className="form-group">
+        <input type="text" placeholder="Field Of Study" name="fieldofstudy" />
+      </div>
+      <div className="form-group">
+        <h4>From Date</h4>
+        <input type="date" name="from" />
+      </div>
+      <div className="form-group">
+        <h4>To Date</h4>
+        <input type="date" name="to" />
+      </div>
+      <div className="form-group">
+        <p>
+          <input type="checkbox" name="current" value="" /> Current School
+        </p>
+      </div>
+      <div className="form-group">
+        <textarea
+          name="description"
+          cols={30}
+          rows={5}
+          placeholder="Program Description"
+        ></textarea>
+      </div>
+      <input type="submit" className="btn btn-primary my-1" value="Submit" />
+      <a className="btn btn-light my-1" href="dashboard.html">
+        Go Back
+      </a>
+    </form>
+  </section>
+);
+
+export default AddEducation;

src/router/Router.tsx

@@ -8,6 +8,7 @@ import Profile from '../pages/Profile';
 import EditProfile from '../pages/EditProfile';
 import Dashboard from '../pages/Dashboard';
 import AddExperience from '../pages/AddExperience';
+import AddEducation from '../pages/AddEducation';
 import * as ROUTES from '../constants/routes';
 
 const Router: FC = () => (
@@ -20,6 +21,7 @@ const Router: FC = () => (
     <Route exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
     <Route exact path={ROUTES.DASHBOARD} component={Dashboard} />
     <Route exact path={ROUTES.ADD_EXPERIENCE} component={AddExperience} />
+    <Route exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
   </Switch>
 );