frontAnswerer/lib/ui_kit/Stepper.tsx

import { useTheme } from "@mui/material";
import MobileStepper from "@mui/material/MobileStepper";
import { hexToRgba } from "@utils/hexToRgba";

interface Props {
  activeStep: number;
  steps: number;
}

export default function ProgressMobileStepper({ activeStep, steps }: Props) {
  const theme = useTheme();

  return (
    <MobileStepper
      variant="progress"
      steps={steps + 1}
      position="static"
      activeStep={activeStep}
      sx={{
        width: "100%",
        padding: "10px 0 0",
        background: "transparent",
        "& .MuiLinearProgress-root": {
          height: "4px",
          background: theme.palette.primary.light,
          width: "100%",
        },
        "& .MuiLinearProgress-bar": { background: theme.palette.primary.main },
        "& .MuiMobileStepper-progress": {
          background: hexToRgba(theme.palette.primary.main, 0.5),
        },
      }}
      nextButton={<></>}
      backButton={<></>}
    />
  );
}