%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/def/static/js/common/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/def/static/js/common/components/MessageBox.js |
import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import { Typography } from "@material-ui/core"; import errorIcon from "assets/images/icons/error.svg"; import infoIcon from "assets/images/check-circle-green.svg"; import Box from "@material-ui/core/Box"; import { array, number, oneOf, oneOfType, string, } from "prop-types"; export const TYPES = { ERROR: "error", INFO: "info", }; const useStyles = makeStyles({ svgIcon: { height: "25px", width: "25px", }, }); function MessageBox({ children, extraSpaceAfter, extraSpaceBefore, type, }) { const classes = useStyles(); const isErrorType = type === TYPES.ERROR; const color = isErrorType ? "#F2DEDE" : "#E8F7EF"; const icon = isErrorType ? errorIcon : infoIcon; return ( <Box bgcolor={color} borderRadius="4px" display="flex" p="0.8rem" marginBottom={extraSpaceAfter} marginTop={extraSpaceBefore}> <img className={classes.svgIcon} src={icon} alt="Error or info icon" /> <Typography component="div" align="left" style={{ paddingLeft: "0.7rem" }}> {children} </Typography> </Box> ); } MessageBox.propTypes = { children: oneOfType([array, string]).isRequired, extraSpaceAfter: number, extraSpaceBefore: number, type: oneOf([TYPES.ERROR, TYPES.INFO]).isRequired, }; MessageBox.defaultProps = { extraSpaceAfter: 0, extraSpaceBefore: 0, }; export default MessageBox;