animated-list

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatedList } from "@/components/magicui/animated-list";
5 
6interface Item {
7  name: string;
8  description: string;
9  icon: string;
10  color: string;
11  time: string;
12}
13 
14let notifications = [
15  {
16    name: "Payment received",
17    description: "Magic UI",
18    time: "15m ago",
19 
20    icon: "💸",
21    color: "#00C9A7",
22  },
23  {
24    name: "User signed up",
25    description: "Magic UI",
26    time: "10m ago",
27    icon: "👤",
28    color: "#FFB800",
29  },
30  {
31    name: "New message",
32    description: "Magic UI",
33    time: "5m ago",
34    icon: "💬",
35    color: "#FF3D71",
36  },
37  {
38    name: "New event",
39    description: "Magic UI",
40    time: "2m ago",
41    icon: "🗞️",
42    color: "#1E86FF",
43  },
44];
45 
46notifications = Array.from({ length: 10 }, () => notifications).flat();
47 
48const Notification = ({ name, description, icon, color, time }: Item) => {
49  return (
50    <figure
51      className={cn(
52        "relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4",
53        // animation styles
54        "transition-all duration-200 ease-in-out hover:scale-[103%]",
55        // light styles
56        "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
57        // dark styles
58        "transform-gpu dark:bg-transparent dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
59      )}
60    >
61      <div className="flex flex-row items-center gap-3">
62        <div
63          className="flex size-10 items-center justify-center rounded-2xl"
64          style={{
65            backgroundColor: color,
66          }}
67        >
68          <span className="text-lg">{icon}</span>
69        </div>
70        <div className="flex flex-col overflow-hidden">
71          <figcaption className="flex flex-row items-center whitespace-pre text-lg font-medium dark:text-white ">
72            <span className="text-sm sm:text-lg">{name}</span>
73            <span className="mx-1">·</span>
74            <span className="text-xs text-gray-500">{time}</span>
75          </figcaption>
76          <p className="text-sm font-normal dark:text-white/60">
77            {description}
78          </p>
79        </div>
80      </div>
81    </figure>
82  );
83};
84 
85export function AnimatedListDemo({
86  className,
87}: {
88  className?: string;
89}) {
90  return (
91    <div
92      className={cn(
93        "relative flex h-[500px] w-full flex-col overflow-hidden rounded-lg border bg-background p-6 md:shadow-xl",
94        className,
95      )}
96    >
97      <AnimatedList>
98        {notifications.map((item, idx) => (
99          <Notification {...item} key={idx} />
100        ))}
101      </AnimatedList>
102    </div>
103  );
104}