42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
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 Typography from '@mui/material/Typography';
|
||
|
|
|
||
|
|
const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
|
||
|
|
|
||
|
|
export default function HorizontalStepperWithError() {
|
||
|
|
const isStepFailed = (step: number) => {
|
||
|
|
return step === 1;
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ width: '100%' }}>
|
||
|
|
<Stepper activeStep={1}>
|
||
|
|
{steps.map((label, index) => {
|
||
|
|
const labelProps: {
|
||
|
|
optional?: React.ReactNode;
|
||
|
|
error?: boolean;
|
||
|
|
} = {};
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|