| import React, { useEffect } from "react"; |
|
|
| const SnackbarError = ({ errorMessage, onClose }) => { |
| useEffect(() => { |
| if (errorMessage) { |
| const timer = setTimeout(() => { |
| onClose(); |
| }, 3000); |
|
|
| return () => clearTimeout(timer); |
| } |
| }, [errorMessage, onClose]); |
|
|
| return ( |
| <div |
| className={`fixed right-0 top-4 bg-red-500 text-white p-4 rounded shadow-lg transition-transform duration-300 ease-in-out transform ${ |
| errorMessage ? "translate-x-0" : "translate-x-full" |
| }`} |
| style={{ display: errorMessage ? "block" : "none" }} |
| > |
| {errorMessage || "Sorry, an error occurred. Please try again"} |
| <button onClick={onClose} className="ml-4 text-white hover:text-red-200"> |
| <span className="closer">X</span> |
| </button> |
| </div> |
| ); |
| }; |
|
|
| export default SnackbarError; |
|
|
