'use client'; import { useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { CheckCircle, AlertTriangle, Info, XCircle, X } from 'lucide-react'; type AlertType = 'success' | 'error' | 'warning' | 'info'; type AlertItem = { id: string; type: AlertType; title: string; message: string; }; const initialAlerts: AlertItem[] = [ { id: '1', type: 'success', title: 'Changes saved', message: 'Your updates have been successfully saved.', }, { id: '2', type: 'error', title: 'Something went wrong', message: 'We couldn’t process your request. Please try again.', }, { id: '3', type: 'warning', title: 'Storage almost full', message: 'You are nearing your storage limit. Consider upgrading.', }, { id: '4', type: 'info', title: 'New update available', message: 'A new version is available. Refresh to get the latest features.', }, ]; const styles: Record = { success: 'border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400', error: 'border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-400', warning: 'border-yellow-500/30 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400', info: 'border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-400', }; const icons: Record = { success: CheckCircle, error: XCircle, warning: AlertTriangle, info: Info, }; export default function Alert() { const [alerts, setAlerts] = useState(initialAlerts); const removeAlert = (id: string) => { setAlerts((prev) => prev.filter((a) => a.id !== id)); }; return (

{alerts.map((alert) => { const Icon = icons[alert.type]; return (

{alert.title}

{alert.message}

); })}

); }

Alert

Installation

Usage