right-tree/frontend/src/components/Stepper.js

import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';

import LocationStep from './steps/locationstep/LocationStep'
import SoilStep from './steps/soilvariantstep/SoilStep'
import ResultsStep from './steps/Results'

const steps = [
    {'label': 'Select location', 'component': LocationStep },
    {'label': 'Choose soil', 'component': SoilStep },
    {'label': 'Choose habitat', 'component': SoilStep },
    {'label': 'Select zone', 'component': SoilStep },
    {'label': 'Project specifics', 'component': SoilStep },
    {'label': 'Summary', 'component': SoilStep }
];

export default function StepperWizard(props) {
  const [activeStep, setActiveStep] = React.useState(0);
  const [nextDisabled, setNextDisabled] = React.useState(true);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setNextDisabled(true);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
    setNextDisabled(true);
  };

  const handleReset = () => {
    setActiveStep(0);
    setNextDisabled(true);
  };

  let CurrentStep = activeStep >= steps.length ? steps[steps.length-1].component : steps[activeStep].component;

  return (
    <Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column"}}>
      <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom:'2vw' }}>
        {steps.map((step, index) => {
          return (
            <Step key={step.label}>
              <StepLabel>{step.label}</StepLabel>
            </Step>
          );
        })}
      </Stepper>
      {activeStep === steps.length ? (
        <React.Fragment sx={{ flexGrow: 1 }}>
          <ResultsStep {...props} />
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
            <Box sx={{ flex: '1 1 auto' }} />
            <Button onClick={handleReset}>Reset</Button>
          </Box>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <CurrentStep {...props} setNextDisabled={setNextDisabled} />
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
            <Button
              color="inherit"
              disabled={activeStep === 0}
              onClick={handleBack}
              sx={{ mr: 1 }}
            >
              Back
            </Button>
            <Box sx={{ flex: '1 1 auto' }} />
            <Button onClick={handleNext} disabled={nextDisabled}>
              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
            </Button>
          </Box>
        </React.Fragment>
      )}
    </Box>
  );
}