add experience page

cypress/integration/router.spec.js

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

src/components/FormHeader.tsx

@@ -0,0 +1,17 @@
+import React, {FC} from 'react';
+import Header from './Header';
+
+interface IProps {
+  title: string;
+  lead: string;
+  icon?: string;
+}
+
+const FormHeader: FC<IProps> = props => (
+  <>
+    <Header {...props} />
+    <small>* marks required fields</small>
+  </>
+);
+
+export default FormHeader;

src/components/Header.tsx

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

src/constants/routes.ts

@@ -9,3 +9,4 @@ export const DEVELOPERS: string = '/developers';
 export const PROFILE: string = '/profile';
 export const EDIT_PROFILE: string = '/edit-profile';
 export const DASHBOARD: string = '/dashboard';
+export const ADD_EXPERIENCE: string = '/add-experience';

src/pages/AddExperience.tsx

@@ -0,0 +1,54 @@
+import React, {FC} from 'react';
+import FormHeader from '../components/FormHeader';
+
+const AddExperience: FC = () => {
+  return (
+    <section className="container">
+      <FormHeader
+        title="Add An Experience"
+        lead="Add any developer/programming
+        positions that you have had in the past"
+        icon="code-branch"
+      />
+
+      <form className="form">
+        <div className="form-group">
+          <input type="text" placeholder="* Job Title" name="title" required />
+        </div>
+        <div className="form-group">
+          <input type="text" placeholder="* Company" name="company" required />
+        </div>
+        <div className="form-group">
+          <input type="text" placeholder="Location" name="location" />
+        </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 Job
+          </p>
+        </div>
+        <div className="form-group">
+          <textarea
+            name="description"
+            cols={30}
+            rows={5}
+            placeholder="Job 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 AddExperience;

src/pages/EditProfile.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {FC} from 'react';
 import Header from '../components/Header';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
@@ -8,15 +8,15 @@ import {
   faLinkedin,
   faInstagram,
 } from '@fortawesome/free-brands-svg-icons';
+import FormHeader from '../components/FormHeader';
 
-const EditProfile = () => {
+const EditProfile: FC = () => {
   return (
     <section className="container">
-      <Header
+      <FormHeader
         title="Create your profile"
         lead="Let's get some information to make your profile stand out"
       />
-      <small>* marks required fields</small>
 
       <form className="form">
         <div className="form-group">

src/router/Router.tsx

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