Animated Activity List

1'use client';
2
3import React, { useState, useEffect } from 'react';
4import { Bell, Heart, Star, MessageSquare } from 'lucide-react';
5
6const NOTIFICATIONS = [
7  { id: 1, title: 'New deployment succeeded', time: '1m ago', icon: Bell, color: 'text-blue-500 bg-blue-50 dark:bg-blue-950' },
8  { id: 2, title: 'Sarah starred Aurenza UI', time: '3m ago', icon: Star, color: 'text-amber-500 bg-amber-50 dark:bg-amber-950' },
9  { id: 3, title: 'Alex liked your component', time: '5m ago', icon: Heart, color: 'text-rose-500 bg-rose-50 dark:bg-rose-950' },
10  { id: 4, title: 'New feedback comment received', time: '8m ago', icon: MessageSquare, color: 'text-emerald-500 bg-emerald-50 dark:bg-emerald-950' },
11];
12
13export default function AnimatedList() {
14  const [items, setItems] = useState(NOTIFICATIONS.slice(0, 3));
15
16  useEffect(() => {
17    const interval = setInterval(() => {
18      setItems((prev) => {
19        const nextItem = NOTIFICATIONS[(prev.length) % NOTIFICATIONS.length];
20        return [nextItem, ...prev.slice(0, 2)];
21      });
22    }, 2400);
23    return () => clearInterval(interval);
24  }, []);
25
26  return (
27    <div className="w-full max-w-sm space-y-2.5 p-4 select-none">
28      {items.map((item, idx) => {
29        const Icon = item.icon;
30        return (
31          <div
32            key={`${item.id}-${idx}`}
33            className="flex items-center gap-3 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3.5 shadow-sm transition-all duration-300 animate-in fade-in slide-in-from-top-2"
34          >
35            <div className={`flex h-8 w-8 items-center justify-center rounded-xl ${item.color}`}>
36              <Icon className="h-4 w-4" />
37            </div>
38            <div className="flex-1 min-w-0">
39              <p className="text-xs font-semibold text-slate-900 dark:text-white truncate">{item.title}</p>
40              <p className="text-[10px] text-slate-400">{item.time}</p>
41            </div>
42          </div>
43        );
44      })}
45    </div>
46  );
47}