Added stepper

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}

src/App.js

@@ -1,13 +1,13 @@
 import React, { Suspense } from "react";
 import "./App.css";
-import Switcher from "./components/layout/Switcher";
+import Main from "./components/layout/Main";
 
 function App() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
       <div className="App">
         <header className="App-header">
-          <Switcher />
+          <Main />
         </header>
       </div>
     </Suspense>

src/components/layout/Main.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Stepper from "./Stepper";
+import Switcher from "./Switcher";
+
+const Main = () => {
+  return (
+    <>
+      <Stepper />
+      <Switcher />
+    </>
+  );
+};
+
+export default Main;

src/components/layout/Stepper.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import steps from "../../constants/steps";
+import {
+  Card,
+  Grid,
+  Stepper,
+  Step,
+  StepButton,
+  StepLabel,
+  makeStyles
+} from "@material-ui/core";
+import { useLocation, useHistory } from "react-router-dom";
+
+const styles = () => ({
+  stepperCard: {
+    padding: "2px",
+    marginBottom: "15px"
+  }
+});
+
+const useStyles = makeStyles(styles);
+
+const ApplicationStepper = () => {
+  const [activeStep, setActiveStep] = useState(0);
+  const classes = useStyles();
+  const location = useLocation();
+  const history = useHistory();
+
+  const handleStepClick = (step) => {
+    if (!step) return;
+    if (location.pathname === step.route) return;
+    history.push(step.route);
+  };
+
+  return (
+    <Card className={classes.stepperCard}>
+      <Grid container alignItems="center" spacing={3}>
+        <Grid item xs={12}>
+          <Stepper activeStep={activeStep} orientation="horizontal">
+            {steps.map((step) => (
+              <Step key={step.id}>
+                <StepButton
+                  id={"offerStepper_" + step.title}
+                  disabled={step.disabled}
+                  onClick={() => handleStepClick(step)}
+                >
+                  <StepLabel>{step.title}</StepLabel>
+                </StepButton>
+              </Step>
+            ))}
+          </Stepper>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+export default ApplicationStepper;

src/constants/steps.js

@@ -0,0 +1,16 @@
+const steps = [
+  {
+    id: 0,
+    title: "Login",
+    route: "/",
+    disabled: false
+  },
+  {
+    id: 1,
+    title: "About",
+    route: "/about",
+    disabled: false
+  }
+];
+
+export default steps;