97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
import styles from "../styles/exos/Alert.module.scss";
|
|
import { HiOutlineTrash } from "react-icons/hi";
|
|
import { AlertType, useAlert } from "../context/alert.context.js";
|
|
import { colors, parseClassName } from "../utils/utils.js";
|
|
import { css, Global, keyframes } from "@emotion/react";
|
|
import chroma from "chroma-js";
|
|
|
|
|
|
function Alert({ alert, onClose }) {
|
|
const alertTypesClasses = {
|
|
[AlertType.Warning]: styles["alert-warning"],
|
|
};
|
|
const alertTypeIcons = {
|
|
[AlertType.Warning]: <HiOutlineTrash />,
|
|
};
|
|
const colorClose = chroma("#0D0221");
|
|
const colorValid = chroma(colors.red);
|
|
return (
|
|
<>
|
|
<div
|
|
className={parseClassName([
|
|
styles.modal,
|
|
alert.active ? styles.visible : "",
|
|
styles["md-effect"],
|
|
])}
|
|
>
|
|
<div className={styles["md-content"]}>
|
|
<div
|
|
className={parseClassName([
|
|
alertTypesClasses[alert.type],
|
|
styles["alert"],
|
|
])}
|
|
>
|
|
<div className={styles["alert-title"]}>
|
|
<div className={styles["title-label"]}>
|
|
{alertTypeIcons[alert.type]}
|
|
{alert.title}
|
|
</div>
|
|
<a onClick={onClose}>×</a>
|
|
</div>
|
|
|
|
<div className={parseClassName([styles["alert-msg"]])}>
|
|
{alert.message}
|
|
</div>
|
|
|
|
<div className={styles["alert-options-container"]}>
|
|
<div className={styles["alert-options"]}>
|
|
<button
|
|
className={styles["validate"]}
|
|
css={css`
|
|
background-color: ${colorValid.alpha(0.2).css()};
|
|
color: ${colorClose.css()};
|
|
color: ${colorValid.css()};
|
|
&:hover {
|
|
background-color: ${colorValid.alpha(0.3).css()};
|
|
}
|
|
`}
|
|
onClick={() => {
|
|
alert.validate()
|
|
onClose()
|
|
}}
|
|
>
|
|
Oui
|
|
</button>
|
|
<button
|
|
className={styles["deny"]}
|
|
onClick={onClose}
|
|
css={css`
|
|
background-color: ${colorClose.alpha(0.3).css()};
|
|
color: ${colorClose.css()};
|
|
color: white;
|
|
&:hover {
|
|
background-color: ${colorClose.alpha(0.6).css()};
|
|
}
|
|
`}
|
|
>
|
|
Non
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>{" "}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
styles["alert-overlay"] + (alert.active == false ? " invisible" : "")
|
|
}
|
|
onClick={() => {
|
|
onClose();
|
|
}}
|
|
></div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Alert;
|