Isoporhode
49 lines
1.4 KiB
JavaScript
49 lines
1.4 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: 300,
|
|
boxSizing: "border-box",
|
|
zIndex: 100001,
|
|
overflow: "hidden",
|
|
};
|
|
|
|
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;
|