Avatar Group

1import * as React from 'react';
2import * as motion from 'motion/react-client';
3 
4import {
5  AvatarGroup as AvatarGroupPrimitive,
6  AvatarGroupTooltip as AvatarGroupTooltipPrimitive,
7  AvatarGroupTooltipArrow as AvatarGroupTooltipArrowPrimitive,
8  type AvatarGroupProps as AvatarGroupPropsPrimitive,
9  type AvatarGroupTooltipProps as AvatarGroupTooltipPropsPrimitive,
10} from '@/components/animate-ui/primitives/animate/avatar-group';
11import { cn } from '@/lib/utils';
12 
13type AvatarGroupProps = AvatarGroupPropsPrimitive;
14 
15function AvatarGroup({
16  className,
17  invertOverlap = true,
18  ...props
19}: AvatarGroupProps) {
20  return (
21    <AvatarGroupPrimitive
22      className={cn('h-12 -space-x-3', className)}
23      invertOverlap={invertOverlap}
24      {...props}
25    />
26  );
27}
28 
29type AvatarGroupTooltipProps = Omit<
30  AvatarGroupTooltipPropsPrimitive,
31  'asChild'
32> & {
33  children: React.ReactNode;
34  layout?: boolean | 'position' | 'size' | 'preserve-aspect';
35};
36 
37function AvatarGroupTooltip({
38  className,
39  children,
40  layout = 'preserve-aspect',
41  ...props
42}: AvatarGroupTooltipProps) {
43  return (
44    <AvatarGroupTooltipPrimitive
45      className={cn(
46        'bg-primary text-primary-foreground z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
47        className,
48      )}
49      {...props}
50    >
51      <motion.div layout={layout} className="overflow-hidden">
52        {children}
53      </motion.div>
54      <AvatarGroupTooltipArrowPrimitive
55        className="fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]"
56        tipRadius={2}
57      />
58    </AvatarGroupTooltipPrimitive>
59  );
60}
61 
62export {
63  AvatarGroup,
64  AvatarGroupTooltip,
65  type AvatarGroupProps,
66  type AvatarGroupTooltipProps,
67};