Sequenced notification list

"use client"

import { cn } from "@/lib/utils"
import { AnimatedList } from "@/components/magicui/animated-list"

const notifications = [
  { name: "Payment received", description: "Placeholder", time: "15m ago", icon: "\ud83d\udcb8", color: "#00C9A7" },
  { name: "New signup", description: "Placeholder", time: "10m ago", icon: "\ud83d\udc64", color: "#FFB800" },
  { name: "New message", description: "Placeholder", time: "5m ago", icon: "\ud83d\udcac", color: "#FF3D71" },
]

const Notification = ({ name, description, icon, color, time }) => (
  <figure className={cn("relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4", "transition-all duration-200 ease-in-out hover:scale-[103%]", "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)]")}>
    <div className="flex flex-row items-center gap-3">
      <div className="flex size-10 items-center justify-center rounded-2xl" style={{ backgroundColor: color }}>
        <span className="text-lg">{icon}</span>
      </div>
      <div className="flex flex-col overflow-hidden">
        <figcaption className="flex flex-row items-center text-lg font-medium whitespace-pre">
          <span className="text-sm sm:text-lg">{name}</span>
          <span className="mx-1">\u00b7</span>
          <span className="text-xs text-gray-500">{time}</span>
        </figcaption>
        <p className="text-sm font-normal">{description}</p>
      </div>
    </div>
  </figure>
)

export function AnimatedListDemo() {
  return (
    <AnimatedList>
      {notifications.map((item, idx) => <Notification key={idx} {...item} />)}
    </AnimatedList>
  )
}