{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list-demo",
  "type": "registry:example",
  "title": "Animated List Demo",
  "description": "Example showing a list with sequenced item animations.",
  "registryDependencies": [
    "@magicui/animated-list"
  ],
  "files": [
    {
      "path": "registry/example/animated-list-demo.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedList } from \"@/registry/magicui/animated-list\"\n\ninterface Item {\n  name: string\n  description: string\n  icon: string\n  color: string\n  time: string\n}\n\nlet notifications = [\n  {\n    name: \"Payment received\",\n    description: \"Magic UI\",\n    time: \"15m ago\",\n\n    icon: \"💸\",\n    color: \"#00C9A7\",\n  },\n  {\n    name: \"User signed up\",\n    description: \"Magic UI\",\n    time: \"10m ago\",\n    icon: \"👤\",\n    color: \"#FFB800\",\n  },\n  {\n    name: \"New message\",\n    description: \"Magic UI\",\n    time: \"5m ago\",\n    icon: \"💬\",\n    color: \"#FF3D71\",\n  },\n  {\n    name: \"New event\",\n    description: \"Magic UI\",\n    time: \"2m ago\",\n    icon: \"🗞️\",\n    color: \"#1E86FF\",\n  },\n]\n\nnotifications = Array.from({ length: 10 }, () => notifications).flat()\n\nconst Notification = ({ name, description, icon, color, time }: Item) => {\n  return (\n    <figure\n      className={cn(\n        \"relative mx-auto min-h-fit w-full max-w-[400px] cursor-pointer overflow-hidden rounded-2xl p-4\",\n        // animation styles\n        \"transition-all duration-200 ease-in-out hover:scale-[103%]\",\n        // light styles\n        \"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)]\",\n        // dark styles\n        \"transform-gpu dark:bg-transparent dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:backdrop-blur-md dark:[border:1px_solid_rgba(255,255,255,.1)]\"\n      )}\n    >\n      <div className=\"flex flex-row items-center gap-3\">\n        <div\n          className=\"flex size-10 items-center justify-center rounded-2xl\"\n          style={{\n            backgroundColor: color,\n          }}\n        >\n          <span className=\"text-lg\">{icon}</span>\n        </div>\n        <div className=\"flex flex-col overflow-hidden\">\n          <figcaption className=\"flex flex-row items-center text-lg font-medium whitespace-pre dark:text-white\">\n            <span className=\"text-sm sm:text-lg\">{name}</span>\n            <span className=\"mx-1\">·</span>\n            <span className=\"text-xs text-gray-500\">{time}</span>\n          </figcaption>\n          <p className=\"text-sm font-normal dark:text-white/60\">\n            {description}\n          </p>\n        </div>\n      </div>\n    </figure>\n  )\n}\n\nexport default function AnimatedListDemo({\n  className,\n}: {\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-[500px] w-full flex-col overflow-hidden p-2\",\n        className\n      )}\n    >\n      <AnimatedList>\n        {notifications.map((item, idx) => (\n          <Notification {...item} key={idx} />\n        ))}\n      </AnimatedList>\n\n      <div className=\"from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t\"></div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}