25 lines
619 B
JavaScript
25 lines
619 B
JavaScript
import { useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
|
|
export function Toast({ message, onClose }) {
|
|
useEffect(() => {
|
|
if (!message) return;
|
|
const t = setTimeout(() => onClose && onClose(), 3000);
|
|
return () => clearTimeout(t);
|
|
}, [message, onClose]);
|
|
return (
|
|
<AnimatePresence>
|
|
{message && (
|
|
<motion.div
|
|
className="toast"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 20 }}
|
|
>
|
|
{message}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|