38 lines
868 B
TypeScript
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={<></>}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|