import { CircleCheck as CheckCircle, Circle as XCircle, CircleAlert as AlertCircle, Info, X } from 'lucide-react'; import { useState, useEffect } from 'react'; const icons = { success: CheckCircle, error: XCircle, warning: AlertCircle, info: Info, }; const styles = { success: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700 text-green-800 dark:text-green-200', error: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 text-red-800 dark:text-red-200', warning: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200', info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700 text-blue-800 dark:text-blue-200', }; export default function ToastAlert({ type = 'info', title = 'Notification', message = 'This is a toast notification message.', duration = 5000, onClose, dismissible = true, className = '', ...props }) { const [isVisible, setIsVisible] = useState(true); const [isAnimating, setIsAnimating] = useState(false); const Icon = icons[type]; useEffect(() => { if (duration > 0) { const timer = setTimeout(() => { handleClose(); }, duration); return () => clearTimeout(timer); } }, [duration]); const handleClose = () => { setIsAnimating(true); setTimeout(() => { setIsVisible(false); if (onClose) onClose(); }, 300); }; if (!isVisible) return null; return (

{title}

{message}

{dismissible && ( )}

); }

Components

Toast Alert

Installation

Tailwind Setup