diff options
Diffstat (limited to 'client/src/components/AlertToast')
-rw-r--r-- | client/src/components/AlertToast/AlertToast.jsx | 24 | ||||
-rw-r--r-- | client/src/components/AlertToast/AlertToast.module.css | 29 |
2 files changed, 53 insertions, 0 deletions
diff --git a/client/src/components/AlertToast/AlertToast.jsx b/client/src/components/AlertToast/AlertToast.jsx new file mode 100644 index 0000000..824b9e6 --- /dev/null +++ b/client/src/components/AlertToast/AlertToast.jsx @@ -0,0 +1,24 @@ +import React, { useEffect } from "react"; +import styles from "./AlertToast.module.css"; + +const AlertToast = ({ openAlertToast, setOpenAlertToast }) => { + useEffect(() => { + const timer = setTimeout(() => { + setOpenAlertToast(false); + }, 3000); + + return () => clearTimeout(timer); + }, [openAlertToast, setOpenAlertToast]); + + return ( + <div + className={`${styles.background} ${openAlertToast ? styles.active : ""}`} + > + <div className={styles.container}> + <p className={styles.container__title}>Please enter some text!</p> + </div> + </div> + ); +}; + +export default AlertToast; diff --git a/client/src/components/AlertToast/AlertToast.module.css b/client/src/components/AlertToast/AlertToast.module.css new file mode 100644 index 0000000..c42ef90 --- /dev/null +++ b/client/src/components/AlertToast/AlertToast.module.css @@ -0,0 +1,29 @@ +.background { + position: fixed; + bottom: 40px; + left: 40px; + z-index: 1000; + transition: opacity 0.3s ease; + opacity: 0; +} + +.background.active { + opacity: 1; +} + +.active { + display: flex; + align-items: center; + justify-content: center; +} + +.container { + background-color: var(--color-light); + color: var(--color-dark); + padding: 10px 20px; + border-radius: 5px; +} + +.container__title { + margin: 0; +} |