{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-list-demo",
  "title": "animated-list-demo",
  "description": "Example showing a animated-list-demo component.",
  "registryDependencies": [
    "@eldoraui/animated-list"
  ],
  "files": [
    {
      "path": "registry/example/animated-list-demo.tsx",
      "content": "import { AnimatedList } from \"@/registry/eldoraui/animated-list\"\n\nexport function AnimatedListDemo() {\n  const notifications = [\n    { name: \"Location\", message: \"Thomas has arrived home\", time: \"2h ago\" },\n    { name: \"Fitness\", message: \"Daily step goal reached!\", time: \"1h ago\" },\n    {\n      name: \"Calendar\",\n      message: \"Team meeting in 30 minutes\",\n      time: \"45m ago\",\n    },\n    { name: \"Tasks\", message: \"3 tasks due today\", time: \"1d ago\" },\n    { name: \"Health\", message: \"Heart rate elevated\", time: \"3h ago\" },\n    { name: \"Email\", message: \"New message from manager\", time: \"5m ago\" },\n    { name: \"Social\", message: \"Video got 1000 likes!\", time: \"2d ago\" },\n    { name: \"Family\", message: \"How are you doing?\", time: \"1w ago\" },\n    { name: \"Friends\", message: \"Coffee tomorrow?\", time: \"2d ago\" },\n    { name: \"Movies\", message: \"Did you see the new movie?\", time: \"4h ago\" },\n  ]\n\n  return (\n    <div className=\"bg-background relative h-[400px] w-full overflow-hidden rounded-lg border\">\n      <AnimatedList\n        stackGap={20}\n        columnGap={85}\n        scaleFactor={0.05}\n        scrollDownDuration={5}\n        formationDuration={1}\n      >\n        {notifications.map((notification, index) => (\n          <div\n            key={index}\n            className=\"bg-card flex w-full max-w-[350px] items-center gap-4 rounded-2xl border p-4 shadow-sm\"\n          >\n            <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-cyan-500 text-sm font-medium text-white\">\n              {notification.name.charAt(0)}\n            </div>\n            <div className=\"flex flex-1 flex-col\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm font-medium\">{notification.name}</span>\n                <span className=\"text-muted-foreground text-xs\">\n                  {notification.time}\n                </span>\n              </div>\n              <span className=\"text-muted-foreground text-sm\">\n                {notification.message}\n              </span>\n            </div>\n          </div>\n        ))}\n      </AnimatedList>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}