frontPanel/src/ui_kit/Stepper.tsx

import * as React from "react";
import MobileStepper from "@mui/material/MobileStepper";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
interface Props {
  desc?: string;
  activeStep?: number;
  steps?: number;
}

export default function ProgressMobileStepper({ desc, activeStep = 1, steps = 7 }: Props) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <Box
      sx={{
        maxWidth: isTablet ? "800px" : "100%",
        width: "100%",
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        height: "51px",
        borderRadius: "13px",
        border: "solid #7E2AEA 1px",
        padding: "0 0 20px 0",
        overflow: "hidden",
      }}
    >
      <MobileStepper
        variant="progress"
        steps={steps}
        position="static"
        activeStep={activeStep}
        sx={{
          width: "100%",
          flexGrow: 1,
          paddingLeft: 0,
          "& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress": {
            height: "10px",
            background: "#ffffff",
            width: "100%",
          },
          "& .css-1v0msyf-MuiLinearProgress-bar1": {
            background: "#7e2aea",
          },
        }}
        nextButton={<></>}
        backButton={<></>}
      />
      <Box sx={{ padding: "3px 3px 3px 20px" }}>
        <Typography sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}>
          {" "}
          Шаг {activeStep} из {steps - 1}
        </Typography>
        <Typography>{desc}</Typography>
      </Box>
    </Box>
  );
}