From 66721d451ac473160d5d9075089628cd6c311ea3 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Wed, 16 Dec 2020 03:09:24 +0200 Subject: [PATCH] Added stepper --- .prettierrc.json | 6 ++++ src/App.js | 4 +-- src/components/layout/Main.js | 14 ++++++++ src/components/layout/Stepper.js | 58 ++++++++++++++++++++++++++++++++ src/constants/steps.js | 16 +++++++++ 5 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 .prettierrc.json create mode 100644 src/components/layout/Main.js create mode 100644 src/components/layout/Stepper.js create mode 100644 src/constants/steps.js diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..fca24df --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "trailingComma": "none", + "tabWidth": 2, + "semi": true, + "singleQuote": false +} diff --git a/src/App.js b/src/App.js index e0dca46..27d5b0f 100644 --- a/src/App.js +++ b/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 ( Loading...}>
- +
diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js new file mode 100644 index 0000000..a6038f4 --- /dev/null +++ b/src/components/layout/Main.js @@ -0,0 +1,14 @@ +import React from "react"; +import Stepper from "./Stepper"; +import Switcher from "./Switcher"; + +const Main = () => { + return ( + <> + + + + ); +}; + +export default Main; diff --git a/src/components/layout/Stepper.js b/src/components/layout/Stepper.js new file mode 100644 index 0000000..1692236 --- /dev/null +++ b/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 ( + + + + + {steps.map((step) => ( + + handleStepClick(step)} + > + {step.title} + + + ))} + + + + + ); +}; + +export default ApplicationStepper; diff --git a/src/constants/steps.js b/src/constants/steps.js new file mode 100644 index 0000000..0a003a2 --- /dev/null +++ b/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;