-
Notifications
You must be signed in to change notification settings - Fork 0
/
Alert.jsx
41 lines (31 loc) · 1.08 KB
/
Alert.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useState } from 'react'
export default function Alert(props) {
const alertType = props.type ? props.type : 'danger';
const alertMessage = props.message ? props.message : 'This is a default alert message';
const hideAlertTime = props.hideDuration ? props.hideDuration : 1000 * 60 * 60;
const [hideAlert, setHideAlert] = useState(false);
let alertStyle = {
backgroundColor: "#ffffff",
padding: "10px",
marginBottom: "10px",
border: "1px solid #efefef",
fontSize: "14px"
};
if (alertType === 'success') {
alertStyle = {...alertStyle, ...{color: "#2d884d", borderColor: "#2d884d" }};
}
if (alertType === 'info') {
alertStyle = {...alertStyle, ...{color: "#4091d7", borderColor: "#4091d7" }}
}
if (alertType === 'error' || alertType === 'danger') {
alertStyle = {...alertStyle, ...{color: "#b34045", borderColor: "#b34045" }};
}
setTimeout(() => {
setHideAlert(true);
}, hideAlertTime);
return (
<React.Fragment>
{ !hideAlert && <div style={alertStyle}>{ alertMessage }</div> }
</React.Fragment>
)
}