You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.0 KiB
33 lines
1.0 KiB
import { useEffect } from 'react';
|
|
|
|
export default function Alert({ type, message, onClose }) {
|
|
const alertClass = `cursor-pointer flex items-center gap-4 p-4 rounded-md text-white transition-opacity duration-300 ${ type === "error" ? "glassmorphism-red" : "glassmorphism-green" } `;
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
onClose();
|
|
}, 5000); // 5 seconds
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [onClose]);
|
|
|
|
return (
|
|
<div
|
|
className={alertClass}
|
|
role="alert"
|
|
onClick={onClose}
|
|
>
|
|
|
|
{
|
|
type === 'success' ? (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-white" ><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
|
|
) : (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-white rotate-45" ><path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path></svg>
|
|
)
|
|
}
|
|
|
|
{message}
|
|
</div>
|
|
);
|
|
|
|
}
|