{
  "name": "avatar-group-truncation-demo",
  "type": "registry:example",
  "registryDependencies": [
    "avatar",
    "avatar-group"
  ],
  "files": [
    {
      "path": "examples/avatar-group-truncation-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\";\nimport { AvatarGroup } from \"@/registry/bases/radix/ui/avatar-group\";\n\nconst avatars = [\n  {\n    name: \"shadcn\",\n    src: \"https://github.com/shadcn.png\",\n    fallback: \"CN\",\n  },\n  {\n    name: \"Ethan Niser\",\n    src: \"https://github.com/ethanniser.png\",\n    fallback: \"EN\",\n  },\n  {\n    name: \"Guillermo Rauch\",\n    src: \"https://github.com/rauchg.png\",\n    fallback: \"GR\",\n  },\n  {\n    name: \"Lee Robinson\",\n    src: \"https://github.com/leerob.png\",\n    fallback: \"LR\",\n  },\n  {\n    name: \"Evil Rabbit\",\n    src: \"https://github.com/evilrabbit.png\",\n    fallback: \"ER\",\n  },\n  {\n    name: \"Tim Neutkens\",\n    src: \"https://github.com/timneutkens.png\",\n    fallback: \"TN\",\n  },\n  {\n    name: \"Delba de Oliveira\",\n    src: \"https://github.com/delbaoliveira.png\",\n    fallback: \"DO\",\n  },\n  {\n    name: \"Shu Ding\",\n    src: \"https://github.com/shuding.png\",\n    fallback: \"SD\",\n  },\n];\n\nexport default function AvatarGroupTruncationDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Max 3 items</h3>\n        <AvatarGroup max={3}>\n          {avatars.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Max 5 items</h3>\n        <AvatarGroup max={5}>\n          {avatars.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}