60 lines
1.7 KiB
TypeScript
Executable File
60 lines
1.7 KiB
TypeScript
Executable File
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>
|
||
);
|
||
}
|