18 lines
2.5 KiB
JSON
18 lines
2.5 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "avatar-group-mask-bottom-demo",
|
|
"type": "registry:ui",
|
|
"title": "Avatar Group Mask Bottom Demo",
|
|
"description": "Demo showing an animated avatar group mask with bottom translation.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/avatar-group-mask"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/components/avatar-group-mask-bottom/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 AvatarGroupMaskBottomDemo = () => {\n return (\n <div className=\"bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% p-0.5 rounded-full\">\n <div className=\"bg-gradient-to-r from-indigo-100 dark:from-indigo-950 from-10% via-sky-100 dark:via-sky-950 via-30% to-emerald-100 dark:to-emerald-950 to-90% p-1.5 rounded-full\">\n <AvatarGroup\n invertOverlap\n align=\"start\"\n translate={50}\n tooltipProps={{ side: 'bottom', sideOffset: 12 }}\n >\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-bottom.tsx"
|
|
}
|
|
]
|
|
} |