frikky
46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import InfoIcon from '@material-ui/icons/Info';
|
|
import CheckIcon from '@material-ui/icons/Check';
|
|
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
|
|
import CloseIcon from '@material-ui/icons/Close';
|
|
import Typography from '@material-ui/core/Typography';
|
|
|
|
const alertStyle = {
|
|
backgroundColor: 'rgba(0,0,0,0.9)',
|
|
color: 'white',
|
|
padding: 15,
|
|
textTransform: 'uppercase',
|
|
borderRadius: '3px',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
boxShadow: '0px 2px 2px 2px rgba(0, 0, 0, 0.03)',
|
|
width: 400,
|
|
boxSizing: 'border-box',
|
|
zIndex: 100001,
|
|
}
|
|
|
|
const buttonStyle = {
|
|
marginLeft: '20px',
|
|
border: 'none',
|
|
backgroundColor: 'transparent',
|
|
cursor: 'pointer',
|
|
color: '#FFFFFF'
|
|
}
|
|
|
|
const AlertTemplate = ({ message, options, style, close }) => {
|
|
return (
|
|
<div style={{ ...alertStyle, ...style }}>
|
|
{options.type === 'info' && <InfoIcon style={{color: "white"}} />}
|
|
{options.type === 'success' && <CheckIcon style={{color: "green", }}/>}
|
|
{options.type === 'error' && <ErrorOutlineIcon style={{color: "red"}} />}
|
|
<Typography style={{marginLeft: 15, flex: 2 }}>{message}</Typography>
|
|
<button onClick={close} style={buttonStyle}>
|
|
<CloseIcon />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AlertTemplate
|