import React, { useEffect, useState } from "react"; import { FiCheckSquare, FiX } from "react-icons/fi"; import { AnimatePresence, motion } from "framer-motion"; const SlideInNotifications = () => { const [notifications, setNotifications] = useState([]); const removeNotif = (id:any) => { setNotifications((pv) => pv.filter((n:any) => n.id !== id)); }; return (

{notifications.map((n:any) => ( ))}

); }; const NOTIFICATION_TTL = 5000; const Notification = ({ text, id, removeNotif }:any) => { useEffect(() => { const timeoutRef = setTimeout(() => { removeNotif(id); }, NOTIFICATION_TTL); return () => clearTimeout(timeoutRef); }, []); return ( {text} ); }; export default SlideInNotifications; const generateRandomNotif = () => { const names = [ "John Anderson", "Emily Peterson", "Frank Daniels", "Laura Williams", "Donald Sanders", "Tom Smith", "Alexandra Black", ]; const randomIndex = Math.floor(Math.random() * names.length); const data = { id: Math.random(), text: `New notification from ${names[randomIndex]}`, }; return data; };