import * as React from "react";
import Box from "@mui/material/Box";
import { useTheme } from "@mui/material/styles";
import MobileStepper from "@mui/material/MobileStepper";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
const steps = [
{
label: "Master Java Programming",
description:
`Become a master in JAVA programming
to start a rewarding career. This
course will help you master basic
JAVA concepts such as Variables, Data
Types, I/O to Advanced Java Collections
concepts and Algorithms. Join the
learning wave today!`,
},
{
label: "Master C++ Programming",
description:
`Start your journey of CPP Programming
Language and master the C++ programming
skills from basics to advanced. Made by
experts, this course is a complete
package of videos, notes & contests from
"Hello World" to STL libraries & algorithms.`,
},
{
label: "Python Programming Foundation",
description:
`A beginner-friendly course designed to
help start learning Python language from
scratch. Learn Python basics, Variables
& Data types, Input & Output, Operators,
and more as you build your python
foundation real strong with us!`,
},
];
export default function TextMobileStepper() {
const theme = useTheme();
const [activeStep, setActiveStep] = React.useState(0);
const maxSteps = steps.length;
const handleNext = () => {setActiveStep(
(prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {setActiveStep(
(prevActiveStep) => prevActiveStep - 1);
};
return (
<div style={{ display: "flex", border: 3 }}>
<Box sx={{
maxWidth: 400,
padding: 3,
border: 1
}}>
<Paper
square
elevation={3}
sx={{
display: "flex",
alignItems: "center",
height: 50,
pl: 2,
bgcolor: "success.main",
color: "white",
}}
>
<Typography>{steps[activeStep].label}
</Typography>
</Paper>
<Box sx={{
height: 255, maxWidth: 400,
width: "100%", boxShadow: 1
}}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="progress"
steps={maxSteps}
position="static"
activeStep={activeStep}
nextButton={
<Button
size="small"
onClick={handleNext}
disabled={activeStep === maxSteps - 1}
>
Next
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={handleBack}
disabled={activeStep === 0}
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
</Box>
<Box sx={{ maxWidth: 400, padding: 3, border: 1 }}>
<Paper
square
elevation={3}
sx={{
display: "flex",
alignItems: "center",
height: 50,
pl: 2,
bgcolor: "success.main",
color: "white",
}}
>
<Typography>{steps[activeStep].label}
</Typography>
</Paper>
<Box sx={{
height: 255, maxWidth: 400,
width: "100%", boxShadow: 1
}}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="dots"
steps={maxSteps}
position="static"
activeStep={activeStep}
nextButton={
<Button
size="small"
onClick={handleNext}
disabled={activeStep === maxSteps - 1}
>
Next
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={handleBack}
disabled={activeStep === 0}
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
</Box>
<Box sx={{ maxWidth: 400, padding: 3, border: 1 }}>
<Paper
square
elevation={3}
sx={{
display: "flex",
alignItems: "center",
height: 50,
pl: 2,
bgcolor: "success.main",
color: "white",
}}
>
<Typography>{steps[activeStep].label}</Typography>
</Paper>
<Box sx={{
height: 255, maxWidth: 400,
width: "100%", boxShadow: 1
}}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="text"
steps={maxSteps}
position="static"
activeStep={activeStep}
nextButton={
<Button
size="small"
onClick={handleNext}
disabled={activeStep === maxSteps - 1}
>
Next
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={handleBack}
disabled={activeStep === 0}
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
</Box>
</div>
);
}