62 lines
2.0 KiB
TypeScript
Executable File
62 lines
2.0 KiB
TypeScript
Executable File
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import MobileStepper from "@mui/material/MobileStepper";
|
||
import { maxQuizSetupSteps, quizSetupSteps } from "@model/quizSettings";
|
||
|
||
interface Props {
|
||
activeStep: number;
|
||
}
|
||
|
||
export default function ProgressMobileStepper({
|
||
activeStep,
|
||
}: Props) {
|
||
const theme = useTheme();
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
maxWidth: isTablet ? "800px" : "100%",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
flexDirection: "column",
|
||
height: "73px",
|
||
borderRadius: "13px",
|
||
border: "solid #7E2AEA 1px",
|
||
padding: "0 0 20px 0",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
<MobileStepper
|
||
variant="progress"
|
||
steps={maxQuizSetupSteps}
|
||
position="static"
|
||
activeStep={activeStep}
|
||
sx={{
|
||
width: "100%",
|
||
flexGrow: 1,
|
||
padding: "8px 0",
|
||
"& .MuiLinearProgress-root": {
|
||
height: "10px",
|
||
background: "#ffffff",
|
||
width: "100%",
|
||
},
|
||
"& .MuiLinearProgress-bar": {
|
||
background: "#7e2aea",
|
||
},
|
||
}}
|
||
nextButton={<></>}
|
||
backButton={<></>}
|
||
/>
|
||
<Box sx={{ padding: "3px 3px 3px 20px" }}>
|
||
<Typography
|
||
sx={{ fontWeight: 400, fontSize: "12px", lineHeight: "14.22px" }}
|
||
>
|
||
{" "}
|
||
Шаг {activeStep + 1 } из {maxQuizSetupSteps}
|
||
</Typography>
|
||
<Typography>{quizSetupSteps[activeStep].stepperText}</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|