frontAnswerer/lib/ui_kit/Stepper.tsx
2024-03-04 19:40:53 +03:00

38 lines
868 B
TypeScript

import { useTheme } from "@mui/material";
import MobileStepper from "@mui/material/MobileStepper";
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%",
opacity: 0.5,
},
"& .MuiLinearProgress-bar": {
background: theme.palette.primary.main,
opacity: 1,
},
}}
nextButton={<></>}
backButton={<></>}
/>
);
}