"use client"; import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { DollarSign, Star, UserPlus, Zap } from "lucide-react"; import { cn } from "@/lib/utils"; interface Item { id: number; icon: typeof DollarSign; gradient: string; title: string; subtitle: string; } const POOL: Omit[] = [ { icon: DollarSign, gradient: "from-emerald-500 to-teal-400", title: "New sale, $79.00", subtitle: "Recovery Peptide Blend", }, { icon: Star, gradient: "from-brand to-glow", title: "New star on GitHub", subtitle: "lumenite/ui crossed 2.1k", }, { icon: UserPlus, gradient: "from-amber-500 to-orange-400", title: "New subscriber", subtitle: "joined the Pro plan", }, { icon: Zap, gradient: "from-fuchsia-500 to-purple-500", title: "Deploy succeeded", subtitle: "production · 12s build", }, ]; let uid = 0; export function AnimatedList({ className }: { className?: string }) { const [items, setItems] = useState([]); useEffect(() => { const interval = setInterval(() => { setItems((prev) => { const next = POOL[uid % POOL.length]; uid += 1; const entry: Item = { id: uid, ...next }; const updated = [entry, ...prev]; return updated.slice(0, 4); }); }, 1600); return () => clearInterval(interval); }, []); return (

{items.map((item) => { const Icon = item.icon; return (

{item.title}

{item.subtitle}

); })} {items.length === 0 && (

Waiting for activity…

)}

); } export default function Demo() { return (

); }

Animated List