Fortura/apps/www/public/r/avatar-group-mask-demo.json
2025-08-20 04:12:49 -06:00

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"
}
]
}