import { useEffect, useState } from 'react' import { createPortal } from 'react-dom' import { motion } from "framer-motion" import { X } from 'lucide-react' import { cn } from '../../lib/utils' const CLOSE_AFTER_IN_MS = 10000 const QuestionNotificationExample = () => { const [showNotification, setShowNotification] = useState(false) const [selectedItem, setSelectedItem] = useState<"React" | "Angular" | null>(null) useEffect(() => { if (showNotification) { const timeout = setTimeout(() => { setShowNotification(false) }, CLOSE_AFTER_IN_MS) return () => { clearTimeout(timeout) } } }, [showNotification]) return (

setShowNotification(!showNotification)} className='border hover:border-purple-600 border-gray-600 px-4 py-2 rounded-lg'>{showNotification ? "Close Notification" : "Spawn Notification"} {showNotification && createPortal(

Question:

What is by far the cooler, more fun

and better Web Framework?

setSelectedItem("React")} className={cn('px-4 py-2 border border-[#1b1e22] bg-[#1B1B1D] w-full rounded-lg hover:opacity-90', selectedItem === "React" && "bg-[#fafafa] text-black ")}>React 😀 setSelectedItem("Angular")} className={cn('px-4 py-2 border border-[#1b1e22] bg-[#1B1B1D] w-full rounded-lg hover:opacity-90', selectedItem === "Angular" && "bg-[#fafafa] text-black ")}>Angular 🤮

setShowNotification(false)} />

, document.body )}

) } export default QuestionNotificationExample

Notification

Glowing Notification

Question Notification