animated-list-demo

1import { AnimatedList } from "@/registry/eldoraui/animated-list"
2 
3export function AnimatedListDemo() {
4  const notifications = [
5    { name: "Location", message: "Thomas has arrived home", time: "2h ago" },
6    { name: "Fitness", message: "Daily step goal reached!", time: "1h ago" },
7    {
8      name: "Calendar",
9      message: "Team meeting in 30 minutes",
10      time: "45m ago",
11    },
12    { name: "Tasks", message: "3 tasks due today", time: "1d ago" },
13    { name: "Health", message: "Heart rate elevated", time: "3h ago" },
14    { name: "Email", message: "New message from manager", time: "5m ago" },
15    { name: "Social", message: "Video got 1000 likes!", time: "2d ago" },
16    { name: "Family", message: "How are you doing?", time: "1w ago" },
17    { name: "Friends", message: "Coffee tomorrow?", time: "2d ago" },
18    { name: "Movies", message: "Did you see the new movie?", time: "4h ago" },
19  ]
20 
21  return (
22    <div className="bg-background relative h-[400px] w-full overflow-hidden rounded-lg border">
23      <AnimatedList
24        stackGap={20}
25        columnGap={85}
26        scaleFactor={0.05}
27        scrollDownDuration={5}
28        formationDuration={1}
29      >
30        {notifications.map((notification, index) => (
31          <div
32            key={index}
33            className="bg-card flex w-full max-w-[350px] items-center gap-4 rounded-2xl border p-4 shadow-sm"
34          >
35            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500 text-sm font-medium text-white">
36              {notification.name.charAt(0)}
37            </div>
38            <div className="flex flex-1 flex-col">
39              <div className="flex items-center justify-between">
40                <span className="text-sm font-medium">{notification.name}</span>
41                <span className="text-muted-foreground text-xs">
42                  {notification.time}
43                </span>
44              </div>
45              <span className="text-muted-foreground text-sm">
46                {notification.message}
47              </span>
48            </div>
49          </div>
50        ))}
51      </AnimatedList>
52    </div>
53  )
54}