{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar14",
  "title": "Avatar",
  "description": "Avatar built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/avatar/14/index.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from \"@/components/ui/dropdown-menu\";\n\nconst users = [\n  {\n    id: \"1\",\n    name: \"Jane Cooper\",\n    initials: \"JC\",\n    avatar: \"https://i.pravatar.cc/150?img=5\"\n  },\n  {\n    id: \"2\",\n    name: \"Devon Lane\",\n    initials: \"DL\",\n    avatar: \"https://i.pravatar.cc/150?img=6\"\n  },\n  {\n    id: \"3\",\n    name: \"Courtney Henry\",\n    initials: \"CH\",\n    avatar: \"https://i.pravatar.cc/150?img=7\"\n  },\n  {\n    id: \"4\",\n    name: \"Leslie Alexander\",\n    initials: \"LA\",\n    avatar: \"https://i.pravatar.cc/150?img=8\"\n  }\n];\n\nexport default function AvatarComponent() {\n  return (\n    <div className=\"flex -space-x-1.5\">\n      <Avatar className=\"ring-background rounded-full ring-1\">\n        <AvatarImage alt=\"Avatar 01\" src=\"https://i.pravatar.cc/150?img=1\" />\n      </Avatar>\n      <Avatar className=\"ring-background rounded-full ring-1\">\n        <AvatarImage alt=\"Avatar 02\" src=\"https://i.pravatar.cc/150?img=2\" />\n      </Avatar>\n      <Avatar className=\"ring-background rounded-full ring-1\">\n        <AvatarImage alt=\"Avatar 03\" src=\"https://i.pravatar.cc/150?img=3\" />\n      </Avatar>\n      <Avatar className=\"ring-background rounded-full ring-1\">\n        <AvatarImage alt=\"Avatar 04\" src=\"https://i.pravatar.cc/150?img=4\" />\n      </Avatar>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            className=\"ring-background bg-muted text-muted-foreground focus-visible:ring-ring flex size-8 items-center justify-center rounded-full text-sm ring-1 focus-visible:ring-2 z-1 focus-visible:outline-none\">\n            +4\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-52\">\n          {users.map((user) => (\n            <DropdownMenuItem key={user.id}>\n              <Avatar className=\"ring-background mr-2 size-7 rounded-full ring-1\">\n                <AvatarImage alt={user.name} src={user.avatar} />\n                <AvatarFallback>{user.initials}</AvatarFallback>\n              </Avatar>\n              <span className=\"truncate text-sm\">{user.name}</span>\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/avatar14.tsx"
    }
  ],
  "type": "registry:component"
}