18 lines
2.2 KiB
JSON
18 lines
2.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "avatar-group-mask-demo",
|
|
"type": "registry:ui",
|
|
"title": "Avatar Group Mask Demo",
|
|
"description": "Demo showing an animated avatar group mask.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/avatar-group-mask"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/components/avatar-group-mask/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-mask';\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 AvatarGroupMaskDemo = () => {\n return (\n <div className=\"bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-0.5 rounded-full\">\n <div className=\"bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 dark:from-indigo-950 dark:via-purple-950 dark:to-pink-950 p-1.5 rounded-full\">\n <AvatarGroup>\n {AVATARS.map((avatar, index) => (\n <Avatar key={index}>\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 </div>\n </div>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/components/avatar-group-mask.tsx"
|
|
}
|
|
]
|
|
} |