18 lines
1.9 KiB
JSON
18 lines
1.9 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "avatar-group-demo",
|
|
"type": "registry:ui",
|
|
"title": "Avatar Group Demo",
|
|
"description": "Demo showing an animated avatar group.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/avatar-group"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/components/avatar-group/index.tsx",
|
|
"content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/components/ui/avatar';\nimport {\n AvatarGroup,\n AvatarGroupTooltip,\n} from '@/components/animate-ui/components/avatar-group';\n\nconst AVATARS = [\n {\n src: 'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg',\n fallback: 'SK',\n tooltip: 'Skyleen',\n },\n {\n src: 'https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg',\n fallback: 'CN',\n tooltip: 'Shadcn',\n },\n {\n src: 'https://pbs.twimg.com/profile_images/1677042510839857154/Kq4tpySA_400x400.jpg',\n fallback: 'AW',\n tooltip: 'Adam Wathan',\n },\n {\n src: 'https://pbs.twimg.com/profile_images/1783856060249595904/8TfcCN0r_400x400.jpg',\n fallback: 'GR',\n tooltip: 'Guillermo Rauch',\n },\n {\n src: 'https://pbs.twimg.com/profile_images/1534700564810018816/anAuSfkp_400x400.jpg',\n fallback: 'JH',\n tooltip: 'Jhey',\n },\n];\n\nexport const AvatarGroupDemo = () => {\n return (\n <AvatarGroup className=\"h-12 -space-x-3\">\n {AVATARS.map((avatar, index) => (\n <Avatar key={index} className=\"size-12 border-3 border-background\">\n <AvatarImage src={avatar.src} />\n <AvatarFallback>{avatar.fallback}</AvatarFallback>\n <AvatarGroupTooltip>\n <p>{avatar.tooltip}</p>\n </AvatarGroupTooltip>\n </Avatar>\n ))}\n </AvatarGroup>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/components/avatar-group.tsx"
|
|
}
|
|
]
|
|
} |