{
  "name": "avatar-group-icons-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar-group"
  ],
  "files": [
    {
      "path": "examples/avatar-group-icons-demo.tsx",
      "type": "registry:example",
      "content": "import { Bell, Heart, MessageCircle, Settings, Star, User } from \"lucide-react\";\nimport { AvatarGroup } from \"@/registry/bases/base/ui/avatar-group\";\n\nconst iconData = [\n  { icon: User, color: \"bg-blue-500\" },\n  { icon: Heart, color: \"bg-red-500\" },\n  { icon: Star, color: \"bg-yellow-500\" },\n  { icon: MessageCircle, color: \"bg-green-500\" },\n  { icon: Settings, color: \"bg-purple-500\" },\n  { icon: Bell, color: \"bg-orange-500\" },\n];\n\nexport default function AvatarGroupIconsDemo() {\n  return (\n    <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Icon Group</h3>\n        <AvatarGroup>\n          {iconData.slice(0, 4).map((item, index) => {\n            const IconComponent = item.icon;\n            return (\n              <div\n                key={index}\n                className={`flex size-10 items-center justify-center rounded-full text-white ${item.color}`}\n              >\n                <IconComponent size={16} />\n              </div>\n            );\n          })}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Icon Group with Truncation</h3>\n        <AvatarGroup max={3}>\n          {iconData.map((item, index) => {\n            const IconComponent = item.icon;\n            return (\n              <div\n                key={index}\n                className={`flex size-10 items-center justify-center rounded-full text-white ${item.color}`}\n              >\n                <IconComponent size={16} />\n              </div>\n            );\n          })}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Reverse Icon Group</h3>\n        <AvatarGroup reverse>\n          {iconData.slice(0, 4).map((item, index) => {\n            const IconComponent = item.icon;\n            return (\n              <div\n                key={index}\n                className={`flex size-10 items-center justify-center rounded-full text-white ${item.color}`}\n              >\n                <IconComponent size={16} />\n              </div>\n            );\n          })}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Reverse with Truncation</h3>\n        <AvatarGroup reverse max={3}>\n          {iconData.map((item, index) => {\n            const IconComponent = item.icon;\n            return (\n              <div\n                key={index}\n                className={`flex size-10 items-center justify-center rounded-full text-white ${item.color}`}\n              >\n                <IconComponent size={16} />\n              </div>\n            );\n          })}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Vertical Icon Group</h3>\n        <div className=\"flex justify-center\">\n          <AvatarGroup orientation=\"vertical\" size={32}>\n            {iconData.slice(0, 4).map((item, index) => {\n              const IconComponent = item.icon;\n              return (\n                <div\n                  key={index}\n                  className={`flex size-8 items-center justify-center rounded-full text-white ${item.color}`}\n                >\n                  <IconComponent size={14} />\n                </div>\n              );\n            })}\n          </AvatarGroup>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Vertical Reverse Icon Group</h3>\n        <div className=\"flex justify-center\">\n          <AvatarGroup orientation=\"vertical\" reverse size={32}>\n            {iconData.slice(0, 4).map((item, index) => {\n              const IconComponent = item.icon;\n              return (\n                <div\n                  key={index}\n                  className={`flex size-8 items-center justify-center rounded-full text-white ${item.color}`}\n                >\n                  <IconComponent size={14} />\n                </div>\n              );\n            })}\n          </AvatarGroup>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}