frontPanel/src/ui_kit/Stepper.tsx

import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import MobileStepper from '@mui/material/MobileStepper';
import Button from '@mui/material/Button';
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import {Box, Typography} from "@mui/material";

export default function ProgressMobileStepper() {
  const theme = useTheme();
  const [activeStep, setActiveStep] = React.useState(1);

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

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

  return (
      <Box
          sx={{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
              flexDirection: 'column',
              height: '51px',
              borderRadius: '13px',
              border: 'solid #7E2AEA 1px',
              padding: '0 0 20px 20px',
              overflow: 'hidden'
          }}
      >
          <MobileStepper
              variant="progress"
              steps={6}
              position="static"
              activeStep={activeStep}
              sx={{
                  width: '100%',
                  flexGrow: 1,
                  '& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress': {
                    height: '10px',
                    background: '#ffffff',
                    width: '100%'
                  },
                  '& .css-1v0msyf-MuiLinearProgress-bar1': {
                    background: '#7e2aea',
                  },
              }}
              nextButton={
                <Button size="small" onClick={handleNext} disabled={activeStep === 5} sx={{display: 'none'}}>
                  {theme.direction === 'rtl' ? (
                      <KeyboardArrowLeft />
                  ) : (
                      <KeyboardArrowRight />
                  )}
                </Button>
              }
              backButton={
                <Button size="small" onClick={handleBack} disabled={activeStep === 0} sx={{display: 'none'}}>
                  {theme.direction === 'rtl' ? (
                      <KeyboardArrowRight />
                  ) : (
                      <KeyboardArrowLeft />
                  )}
                </Button>
              }
          />
          <Typography> Шаг 1 из 6</Typography>
          <Typography>Настройка стартовой страницы</Typography>
    </Box>
  );
}


































// 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 Typography from "@mui/material/Typography";
// import Navbar from "../components/Navbar/Navbar";
// import Create from "../pages/createQuize/Create";
// import { Container, useTheme } from "@mui/material";
// import Projects from "../pages/createQuize/Projects";
// import MyQuizzes from "../components/MyQuizzes";
// import SidebarCreateQuize from "./sidebarCreateQuize";
// import CreateCard from "./CreateCard";
// // import StartPage from "../pages/startPage/StartPage";
//
// const steps = ["Step 34", "Step 2", "Step 3"];
//
// export default function HorizontalLinearStepper() {
//   const [activeStep, setActiveStep] = React.useState(0);
//   const [skipped, setSkipped] = React.useState(new Set<number>());
//   const theme = useTheme();
//   const isStepOptional = (step: number) => {
//     return step === 1;
//   };
//
//   const isStepSkipped = (step: number) => {
//     return skipped.has(step);
//   };
//
//   const handleNext = () => {
//     let newSkipped = skipped;
//     if (isStepSkipped(activeStep)) {
//       newSkipped = new Set(newSkipped.values());
//       newSkipped.delete(activeStep);
//     }
//
//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
//     setSkipped(newSkipped);
//   };
//
//   const handleBack = () => {
//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
//   };
//
//   const handleSkip = () => {
//     if (!isStepOptional(activeStep)) {
//       // You probably want to guard against something like this,
//       // it should never occur unless someone's actively trying to break something.
//       throw new Error("You can't skip a step that isn't optional.");
//     }
//
//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
//     setSkipped((prevSkipped) => {
//       const newSkipped = new Set(prevSkipped.values());
//       newSkipped.add(activeStep);
//       return newSkipped;
//     });
//   };
//
//   const handleReset = () => {
//     setActiveStep(0);
//   };
//   let component = null
//   switch (activeStep) {
//   case 0:
//     component = <></>
//     break;
//   case 1:
//     component = <CreateCard/>
//     break;
//   // case 2:
//   //   component = <StartPage/>
//   //   break;
//   default:
//     break;
// }
//   return (<>
//     <Container  maxWidth={false}
//     disableGutters
//     sx={{
//       display:'flex',
//         minHeight: "calc(100vh - 80px)",
//     }}>
//       {/*<SidebarCreateQuize/>*/}
//       <Container
//                 maxWidth="lg"
//                 disableGutters
//                 sx={{
//                     p: "25px",
//                     [theme.breakpoints.up("lg")]: {
//                         maxWidth: "1210px",
//                     }
//                 }}
//             >
//      {component}
//      </Container>
//      </Container>
//       {activeStep === steps.length ? (
//         <React.Fragment>
//           <Typography sx={{ mt: 2, mb: 1 }}>
//             All steps completed - you&apos;re finished
//           </Typography>
//           <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
//             <Box sx={{ flex: "1 1 auto" }} />
//             <Button onClick={handleReset}>Reset</Button>
//           </Box>
//         </React.Fragment>
//       ) : (
//
//         //Тут отображаемые компоненты
//         <React.Fragment>
//           <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
//             <Button
//               color="inherit"
//               disabled={activeStep === 0}
//               onClick={handleBack}
//               sx={{ mr: 1 }}
//             >
//               Back
//             </Button>
//             <Box sx={{ flex: "1 1 auto" }} />
//             {isStepOptional(activeStep) && (
//               <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
//                 Skip
//               </Button>
//             )}
//             <Button onClick={handleNext}>
//               {activeStep === steps.length - 1 ? "Finish" : "Next"}
//             </Button>
//           </Box>
//         </React.Fragment>
//       )}
//
//       <Stepper activeStep={activeStep}>
//         {steps.map((label, index) => {
//           const stepProps: { completed?: boolean } = {};
//           const labelProps: {
//             optional?: React.ReactNode;
//           } = {};
//           if (isStepOptional(index)) {
//             labelProps.optional = (
//               <Typography variant="caption">Optional</Typography>
//             );
//           }
//           if (isStepSkipped(index)) {
//             stepProps.completed = false;
//           }
//
//           return (
//             <Step key={label} {...stepProps}>
//               <StepLabel {...labelProps}>{label}</StepLabel>
//             </Step>
//           );
//         })}
//       </Stepper>
//       </>
//   );
// }