21 lines
3.2 KiB
JSON
21 lines
3.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "avatar-group",
|
|
"type": "registry:ui",
|
|
"title": "Avatar Group",
|
|
"description": "An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.",
|
|
"dependencies": [
|
|
"motion"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/tooltip"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/components/avatar-group/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n type TooltipProps,\n type TooltipContentProps,\n} from '@/components/animate-ui/components/tooltip';\n\ntype AvatarProps = TooltipProps & {\n children: React.ReactNode;\n zIndex: number;\n transition: Transition;\n translate: string | number;\n};\n\nfunction AvatarContainer({\n children,\n zIndex,\n transition,\n translate,\n ...props\n}: AvatarProps) {\n return (\n <Tooltip {...props}>\n <TooltipTrigger>\n <motion.div\n data-slot=\"avatar-container\"\n initial=\"initial\"\n whileHover=\"hover\"\n whileTap=\"hover\"\n className=\"relative\"\n style={{ zIndex }}\n >\n <motion.div\n variants={{\n initial: { y: 0 },\n hover: { y: translate },\n }}\n transition={transition}\n >\n {children}\n </motion.div>\n </motion.div>\n </TooltipTrigger>\n </Tooltip>\n );\n}\n\ntype AvatarGroupTooltipProps = TooltipContentProps;\n\nfunction AvatarGroupTooltip(props: AvatarGroupTooltipProps) {\n return <TooltipContent {...props} />;\n}\n\ntype AvatarGroupProps = Omit<React.ComponentProps<'div'>, 'translate'> & {\n children: React.ReactElement[];\n transition?: Transition;\n invertOverlap?: boolean;\n translate?: string | number;\n tooltipProps?: Omit<TooltipProps, 'children'>;\n};\n\nfunction AvatarGroup({\n ref,\n children,\n className,\n transition = { type: 'spring', stiffness: 300, damping: 17 },\n invertOverlap = false,\n translate = '-30%',\n tooltipProps = { side: 'top', sideOffset: 24 },\n ...props\n}: AvatarGroupProps) {\n return (\n <TooltipProvider openDelay={0} closeDelay={0}>\n <div\n ref={ref}\n data-slot=\"avatar-group\"\n className={cn('flex flex-row -space-x-2 items-center h-8', className)}\n {...props}\n >\n {children?.map((child, index) => (\n <AvatarContainer\n key={index}\n zIndex={\n invertOverlap ? React.Children.count(children) - index : index\n }\n transition={transition}\n translate={translate}\n {...tooltipProps}\n >\n {child}\n </AvatarContainer>\n ))}\n </div>\n </TooltipProvider>\n );\n}\n\nexport {\n AvatarGroup,\n AvatarGroupTooltip,\n type AvatarGroupProps,\n type AvatarGroupTooltipProps,\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/components/avatar-group.tsx"
|
|
}
|
|
]
|
|
} |