import React from
'react'
;
import {
makeStyles, Theme,
createStyles
} from
'@material-ui/core/styles'
;
import Stepper from
'@material-ui/core/Stepper'
;
import Step from
'@material-ui/core/Step'
;
import StepLabel from
'@material-ui/core/StepLabel'
;
import StepContent from
'@material-ui/core/StepContent'
;
import Button from
'@material-ui/core/Button'
;
import Paper from
'@material-ui/core/Paper'
;
import Typography from
'@material-ui/core/Typography'
;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width:
'100%'
,
},
button: {
marginTop: theme.spacing(1),
marginRight: theme.spacing(1),
},
actionsContainer: {
marginBottom: theme.spacing(2),
},
resetContainer: {
padding: theme.spacing(3),
},
}),
);
function
getSteps() {
return
[
<b style={{ color:
'red'
}}>
Pending
</b>,
<b style={{ color:
'orange'
}}>
Review
</b>,
<b style={{ color:
'green'
}}>
Published
</b>
];
}
function
getStepContent(step: number) {
switch
(step) {
case
0:
return
`You submit an Article
and it goes to Pending state `;
case
1:
return
'Article is reviewed'
;
case
2:
return
`Hey Geek!! Your Article is Published`;
default
:
return
'Unknown step'
;
}
}
export
default
function
GeekStepper() {
const classes = useStyles();
const [activeStep, setActiveStep] =
React.useState(0);
const steps = getSteps();
const handleNext = () => {
setActiveStep(
(prevActiveStep) =>
prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep(
(prevActiveStep) =>
prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
return
(
<div className={classes.root}>
<h1>GeeksforGeeks Article Publishing Process</h1>
<Stepper activeStep={activeStep} orientation=
"vertical"
>
{steps.map((label, index) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
<Typography>
{getStepContent(index)}
</Typography>
<div className={classes.actionsContainer}>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.button}>
Back
</Button>
<Button
variant=
"contained"
color=
"primary"
onClick={handleNext}
className={classes.button}>
{
activeStep === steps.length - 1 ?
'Finish'
:
'Next'
}
</Button>
</div>
</div>
</StepContent>
</Step>
))}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0}
className={classes.resetContainer}>
<Typography>
All steps completed -
your Article is Published
</Typography>
<Button onClick={handleReset}
className={classes.button}>
Reset
</Button>
</Paper>
)}
</div>
);
}