File size: 2,712 Bytes
b9fe2b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
'use client';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import * as React from 'react';
import { cn } from '@/lib/utils';
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className,
)}
{...props}
/>
));
Avatar.displayName = AvatarPrimitive.Root.displayName;
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn('aspect-square h-full w-full', className)}
{...props}
/>
));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
'flex h-full w-full items-center justify-center rounded-full bg-muted',
className,
)}
{...props}
/>
));
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
export { Avatar, AvatarFallback, AvatarImage };
type AvatarProps = React.ComponentProps<typeof Avatar>;
interface AvatarGroupProps extends React.ComponentProps<'div'> {
children: React.ReactElement<AvatarProps>[];
max?: number;
}
export const AvatarGroup = ({
children,
max,
className,
...props
}: AvatarGroupProps) => {
const totalAvatars = React.Children.count(children);
const displayedAvatars = React.Children.toArray(children)
.slice(0, max)
.reverse();
const remainingAvatars = max ? Math.max(totalAvatars - max, 1) : 0;
return (
<div
className={cn('flex items-center flex-row-reverse', className)}
{...props}
>
{remainingAvatars > 0 && (
<Avatar className="-ml-2 hover:z-10 relative ring-2 ring-background">
<AvatarFallback className="bg-muted-foreground text-white">
+{remainingAvatars}
</AvatarFallback>
</Avatar>
)}
{displayedAvatars.map((avatar, index) => {
if (!React.isValidElement(avatar)) return null;
return (
<div key={index} className="-ml-2 hover:z-10 relative">
{React.cloneElement(avatar as React.ReactElement<AvatarProps>, {
className: 'ring-2 ring-background',
})}
</div>
);
})}
</div>
);
};
|