first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,49 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Stepper from '@mui/material/Stepper';
|
||||
import Step from '@mui/material/Step';
|
||||
import StepLabel from '@mui/material/StepLabel';
|
||||
|
||||
const steps = [
|
||||
'Select master blaster campaign settings',
|
||||
'Create an ad group',
|
||||
'Create an ad',
|
||||
];
|
||||
|
||||
export default function AlternativeLabel() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Alternative Label
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Stepper activeStep={1} alternativeLabel className="direction-ltr">
|
||||
{steps.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel>{label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import PropTypes from 'prop-types';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Stepper from '@mui/material/Stepper';
|
||||
import Step from '@mui/material/Step';
|
||||
import StepLabel from '@mui/material/StepLabel';
|
||||
import Check from '@mui/icons-material/Check';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
||||
import VideoLabelIcon from '@mui/icons-material/VideoLabel';
|
||||
import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
|
||||
|
||||
const QontoConnector = styled(StepConnector)(({ theme }) => ({
|
||||
[`&.${stepConnectorClasses.alternativeLabel}`]: {
|
||||
top: 10,
|
||||
left: 'calc(-50% + 16px)',
|
||||
right: 'calc(50% + 16px)',
|
||||
},
|
||||
[`&.${stepConnectorClasses.active}`]: {
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
borderColor: '#784af4',
|
||||
},
|
||||
},
|
||||
[`&.${stepConnectorClasses.completed}`]: {
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
borderColor: '#784af4',
|
||||
},
|
||||
},
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
|
||||
borderTopWidth: 3,
|
||||
borderRadius: 1,
|
||||
},
|
||||
}));
|
||||
|
||||
const QontoStepIconRoot = styled('div')(({ theme, ownerState }) => ({
|
||||
color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0',
|
||||
display: 'flex',
|
||||
height: 22,
|
||||
alignItems: 'center',
|
||||
...(ownerState.active && {
|
||||
color: '#784af4',
|
||||
}),
|
||||
'& .QontoStepIcon-completedIcon': {
|
||||
color: '#784af4',
|
||||
zIndex: 1,
|
||||
fontSize: 18,
|
||||
},
|
||||
'& .QontoStepIcon-circle': {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'currentColor',
|
||||
},
|
||||
}));
|
||||
|
||||
function QontoStepIcon(props) {
|
||||
const { active, completed, className } = props;
|
||||
|
||||
return (
|
||||
<QontoStepIconRoot ownerState={{ active }} className={className}>
|
||||
{completed ? (
|
||||
<Check className="QontoStepIcon-completedIcon" />
|
||||
) : (
|
||||
<div className="QontoStepIcon-circle" />
|
||||
)}
|
||||
</QontoStepIconRoot>
|
||||
);
|
||||
}
|
||||
|
||||
QontoStepIcon.propTypes = {
|
||||
/**
|
||||
* Whether this step is active.
|
||||
* @default false
|
||||
*/
|
||||
active: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Mark the step as completed. Is passed to child components.
|
||||
* @default false
|
||||
*/
|
||||
completed: PropTypes.bool,
|
||||
};
|
||||
|
||||
const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
|
||||
[`&.${stepConnectorClasses.alternativeLabel}`]: {
|
||||
top: 22,
|
||||
},
|
||||
[`&.${stepConnectorClasses.active}`]: {
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
backgroundImage:
|
||||
'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
|
||||
},
|
||||
},
|
||||
[`&.${stepConnectorClasses.completed}`]: {
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
backgroundImage:
|
||||
'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
|
||||
},
|
||||
},
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
height: 3,
|
||||
border: 0,
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
|
||||
borderRadius: 1,
|
||||
},
|
||||
}));
|
||||
|
||||
const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
|
||||
zIndex: 1,
|
||||
color: '#fff',
|
||||
width: 50,
|
||||
height: 50,
|
||||
display: 'flex',
|
||||
borderRadius: '50%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
...(ownerState.active && {
|
||||
backgroundImage:
|
||||
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
|
||||
boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
|
||||
}),
|
||||
...(ownerState.completed && {
|
||||
backgroundImage:
|
||||
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
|
||||
}),
|
||||
}));
|
||||
|
||||
function ColorlibStepIcon(props) {
|
||||
const { active, completed, className } = props;
|
||||
|
||||
const icons = {
|
||||
1: <SettingsIcon />,
|
||||
2: <GroupAddIcon />,
|
||||
3: <VideoLabelIcon />,
|
||||
};
|
||||
|
||||
return (
|
||||
<ColorlibStepIconRoot ownerState={{ completed, active }} className={className}>
|
||||
{icons[String(props.icon)]}
|
||||
</ColorlibStepIconRoot>
|
||||
);
|
||||
}
|
||||
|
||||
ColorlibStepIcon.propTypes = {
|
||||
/**
|
||||
* Whether this step is active.
|
||||
* @default false
|
||||
*/
|
||||
active: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Mark the step as completed. Is passed to child components.
|
||||
* @default false
|
||||
*/
|
||||
completed: PropTypes.bool,
|
||||
/**
|
||||
* The label displayed in the step icon.
|
||||
*/
|
||||
icon: PropTypes.node,
|
||||
};
|
||||
|
||||
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
|
||||
|
||||
export default function CustomizedHorizontalStepper() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Customized Horizontal Stepper
|
||||
</Typography>
|
||||
|
||||
<Stack sx={{ width: '100%' }} spacing={4}>
|
||||
<Stepper alternativeLabel activeStep={1} className="direction-ltr" connector={<QontoConnector />}>
|
||||
{steps.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
<Stepper alternativeLabel activeStep={1} className="direction-ltr" connector={<ColorlibConnector />}>
|
||||
{steps.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Stepper from '@mui/material/Stepper';
|
||||
import Step from '@mui/material/Step';
|
||||
import StepLabel from '@mui/material/StepLabel';
|
||||
|
||||
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
|
||||
|
||||
export default function ErrorStep() {
|
||||
const isStepFailed = (step) => {
|
||||
return step === 1;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Error Step
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '100%' }} className="rtl-step-label">
|
||||
<Stepper activeStep={1}>
|
||||
{steps.map((label, index) => {
|
||||
const labelProps = {};
|
||||
if (isStepFailed(index)) {
|
||||
labelProps.optional = (
|
||||
<Typography variant="caption" color="error">
|
||||
Alert message
|
||||
</Typography>
|
||||
);
|
||||
|
||||
labelProps.error = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<Step key={label}>
|
||||
<StepLabel {...labelProps}>{label}</StepLabel>
|
||||
</Step>
|
||||
);
|
||||
})}
|
||||
</Stepper>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Stepper from '@mui/material/Stepper';
|
||||
import Step from '@mui/material/Step';
|
||||
import StepLabel from '@mui/material/StepLabel';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
|
||||
|
||||
export default function HorizontalStepper() {
|
||||
|
||||
const [activeStep, setActiveStep] = React.useState(0);
|
||||
const [skipped, setSkipped] = React.useState(new Set());
|
||||
|
||||
const isStepOptional = (step) => {
|
||||
return step === 1;
|
||||
};
|
||||
|
||||
const isStepSkipped = (step) => {
|
||||
return skipped.has(step);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
let newSkipped = skipped;
|
||||
if (isStepSkipped(activeStep)) {
|
||||
newSkipped = new Set(newSkipped.values());
|
||||
newSkipped.delete(activeStep);
|
||||
}
|
||||
|
||||
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
||||
setSkipped(newSkipped);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
||||
};
|
||||
|
||||
const handleSkip = () => {
|
||||
if (!isStepOptional(activeStep)) {
|
||||
// You probably want to guard against something like this,
|
||||
// it should never occur unless someone's actively trying to break something.
|
||||
throw new Error("You can't skip a step that isn't optional.");
|
||||
}
|
||||
|
||||
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
||||
setSkipped((prevSkipped) => {
|
||||
const newSkipped = new Set(prevSkipped.values());
|
||||
newSkipped.add(activeStep);
|
||||
return newSkipped;
|
||||
});
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setActiveStep(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Horizontal Stepper
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '100%' }} className="rtl-step-label">
|
||||
<Stepper activeStep={activeStep}>
|
||||
{steps.map((label, index) => {
|
||||
const stepProps = {};
|
||||
const labelProps = {};
|
||||
if (isStepOptional(index)) {
|
||||
labelProps.optional = (
|
||||
<Typography variant="caption">Optional</Typography>
|
||||
);
|
||||
}
|
||||
if (isStepSkipped(index)) {
|
||||
stepProps.completed = false;
|
||||
}
|
||||
return (
|
||||
<Step key={label} {...stepProps}>
|
||||
<StepLabel {...labelProps}>{label}</StepLabel>
|
||||
</Step>
|
||||
);
|
||||
})}
|
||||
</Stepper>
|
||||
{activeStep === steps.length ? (
|
||||
<React.Fragment>
|
||||
<Typography sx={{ mt: 2, mb: 1 }}>
|
||||
All steps completed - you're finished
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
||||
<Box sx={{ flex: '1 1 auto' }} />
|
||||
<Button onClick={handleReset}>Reset</Button>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
||||
<Button
|
||||
color="inherit"
|
||||
disabled={activeStep === 0}
|
||||
onClick={handleBack}
|
||||
sx={{ mr: 1 }}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Box sx={{ flex: '1 1 auto' }} />
|
||||
{isStepOptional(activeStep) && (
|
||||
<Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
|
||||
Skip
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button onClick={handleNext}>
|
||||
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
|
||||
</Button>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
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 Button from '@mui/material/Button';
|
||||
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
|
||||
import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
label: 'Select campaign settings',
|
||||
description: `For each ad campaign that you create, you can control how much
|
||||
you're willing to spend on clicks and conversions, which networks
|
||||
and geographical locations you want your ads to show on, and more.`,
|
||||
},
|
||||
{
|
||||
label: 'Create an ad group',
|
||||
description:
|
||||
'An ad group contains one or more ads which target a shared set of keywords.',
|
||||
},
|
||||
{
|
||||
label: 'Create an ad',
|
||||
description: `Try out different ad text to see what brings in the most customers,
|
||||
and learn how to enhance your ads using features like ad extensions.
|
||||
If you run into any problems with your ads, find out how to tell if
|
||||
they're running and how to resolve approval issues.`,
|
||||
},
|
||||
];
|
||||
|
||||
export default function MobileStepperText() {
|
||||
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 (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Mobile Stepper
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ maxWidth: 400, flexGrow: 1 }} className="mobile-stepper">
|
||||
<Paper
|
||||
square
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: 50,
|
||||
pl: 2,
|
||||
bgcolor: 'background.default',
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography>{steps[activeStep].label}</Typography>
|
||||
</Paper>
|
||||
|
||||
<Box sx={{ height: 255, maxWidth: 400, width: '100%', p: 2 }}>
|
||||
{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>
|
||||
}
|
||||
className="bg-black"
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Stepper from '@mui/material/Stepper';
|
||||
import Step from '@mui/material/Step';
|
||||
import StepButton from '@mui/material/StepButton';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
|
||||
|
||||
export default function NonLinear() {
|
||||
|
||||
const [activeStep, setActiveStep] = React.useState(0);
|
||||
const [completed, setCompleted] = React.useState({});
|
||||
|
||||
const totalSteps = () => {
|
||||
return steps.length;
|
||||
};
|
||||
|
||||
const completedSteps = () => {
|
||||
return Object.keys(completed).length;
|
||||
};
|
||||
|
||||
const isLastStep = () => {
|
||||
return activeStep === totalSteps() - 1;
|
||||
};
|
||||
|
||||
const allStepsCompleted = () => {
|
||||
return completedSteps() === totalSteps();
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
const newActiveStep =
|
||||
isLastStep() && !allStepsCompleted()
|
||||
? // It's the last step, but not all steps have been completed,
|
||||
// find the first step that has been completed
|
||||
steps.findIndex((step, i) => !(i in completed))
|
||||
: activeStep + 1;
|
||||
setActiveStep(newActiveStep);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
||||
};
|
||||
|
||||
const handleStep = (step) => () => {
|
||||
setActiveStep(step);
|
||||
};
|
||||
|
||||
const handleComplete = () => {
|
||||
const newCompleted = completed;
|
||||
newCompleted[activeStep] = true;
|
||||
setCompleted(newCompleted);
|
||||
handleNext();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setActiveStep(0);
|
||||
setCompleted({});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Non Linear
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '100%' }} className="rtl-step-label">
|
||||
<Stepper nonLinear activeStep={activeStep}>
|
||||
{steps.map((label, index) => (
|
||||
<Step key={label} completed={completed[index]}>
|
||||
<StepButton color="inherit" onClick={handleStep(index)}>
|
||||
{label}
|
||||
</StepButton>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
|
||||
<div>
|
||||
{allStepsCompleted() ? (
|
||||
<React.Fragment>
|
||||
<Typography sx={{ mt: 2, mb: 1 }}>
|
||||
All steps completed - you're finished
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
||||
<Box sx={{ flex: '1 1 auto' }} />
|
||||
<Button onClick={handleReset}>Reset</Button>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Typography sx={{ mt: 2, mb: 1, py: 1 }}>
|
||||
Step {activeStep + 1}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
|
||||
<Button
|
||||
color="inherit"
|
||||
disabled={activeStep === 0}
|
||||
onClick={handleBack}
|
||||
className="mr-1"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<Box sx={{ flex: '1 1 auto' }} />
|
||||
|
||||
<Button onClick={handleNext} className="mr-1">
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{activeStep !== steps.length &&
|
||||
(completed[activeStep] ? (
|
||||
<Typography variant="caption" sx={{ display: 'inline-block' }}>
|
||||
Step {activeStep + 1} already completed
|
||||
</Typography>
|
||||
) : (
|
||||
<Button onClick={handleComplete}>
|
||||
{completedSteps() === totalSteps() - 1
|
||||
? 'Finish'
|
||||
: 'Complete Step'}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Stepper from '@mui/material/Stepper';
|
||||
import Step from '@mui/material/Step';
|
||||
import StepLabel from '@mui/material/StepLabel';
|
||||
import StepContent from '@mui/material/StepContent';
|
||||
import Button from '@mui/material/Button';
|
||||
import Paper from '@mui/material/Paper';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
label: 'Select campaign settings',
|
||||
description: `For each ad campaign that you create, you can control how much
|
||||
you're willing to spend on clicks and conversions, which networks
|
||||
and geographical locations you want your ads to show on, and more.`,
|
||||
},
|
||||
{
|
||||
label: 'Create an ad group',
|
||||
description:
|
||||
'An ad group contains one or more ads which target a shared set of keywords.',
|
||||
},
|
||||
{
|
||||
label: 'Create an ad',
|
||||
description: `Try out different ad text to see what brings in the most customers,
|
||||
and learn how to enhance your ads using features like ad extensions.
|
||||
If you run into any problems with your ads, find out how to tell if
|
||||
they're running and how to resolve approval issues.`,
|
||||
},
|
||||
];
|
||||
|
||||
export default function VerticalStepper() {
|
||||
|
||||
const [activeStep, setActiveStep] = React.useState(0);
|
||||
|
||||
const handleNext = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setActiveStep(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Vertical Stepper
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ maxWidth: 400 }}>
|
||||
<Stepper activeStep={activeStep} orientation="vertical">
|
||||
{steps.map((step, index) => (
|
||||
<Step key={step.label}>
|
||||
<StepLabel
|
||||
optional={
|
||||
index === 2 ? (
|
||||
<Typography variant="caption">Last step</Typography>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{step.label}
|
||||
</StepLabel>
|
||||
<StepContent>
|
||||
<Typography>{step.description}</Typography>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleNext}
|
||||
sx={{ mt: 1 }}
|
||||
className="mr-1 whiteColor"
|
||||
>
|
||||
{index === steps.length - 1 ? 'Finish' : 'Continue'}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={index === 0}
|
||||
onClick={handleBack}
|
||||
sx={{ mt: 1 }}
|
||||
className="mr-1"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</StepContent>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
{activeStep === steps.length && (
|
||||
<Paper square elevation={0} sx={{ p: 3 }} className="bg-black">
|
||||
<Typography>All steps completed - you're finished</Typography>
|
||||
<Button onClick={handleReset} sx={{ mt: 1 }} className="mr-1">
|
||||
Reset
|
||||
</Button>
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user