health-apps-cms/src/components/FormFooterMessage.jsx

53 lines
1.3 KiB
JavaScript

import { Alert } from '@mui/material';
import React from 'react';
import { useStyles } from './styles/formFooterMessageStyles';
import { LoadingButton } from '@mui/lab';
import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
const FormFooterMessage = ({
mandatoryFieldText,
nextButtonTitle,
nextButtonOnClick,
isSubmitting,
}) => {
const classes = useStyles();
return (
<div className={classes.allElementOuterDiv}>
<div
className={
nextButtonTitle
? classes.alertDivWithButton
: classes.alertDivWithoutButton
}
>
<Alert
icon={false}
className={classes.alert}
variant="outlined"
severity="warning"
>
{mandatoryFieldText}
</Alert>
</div>
{nextButtonTitle && (
<div className={classes.nextButtonDiv}>
<LoadingButton
className={classes.nextButton}
color="primary"
variant="contained"
onClick={nextButtonOnClick}
loading={isSubmitting}
>
<CheckBoxOutlinedIcon
className={classes.checkBoxIconForNextButton}
/>
{nextButtonTitle}
</LoadingButton>
</div>
)}
</div>
);
};
export default FormFooterMessage;