Avatar Group

1import * as React from "react";
2 
3import { Avatar, AvatarFallback } from "@/components/ui/avatar";
4import { cn } from "@/lib/utils";
5 
6type AvatarProps = React.ComponentProps<typeof Avatar>;
7 
8interface AvatarGroupProps extends React.ComponentProps<"div"> {
9	children: React.ReactElement<AvatarProps>[];
10	max?: number;
11}
12 
13const AvatarGroup = ({
14	children,
15	max,
16	className,
17	...props
18}: AvatarGroupProps) => {
19	const totalAvatars = React.Children.count(children);
20	const displayedAvatars = React.Children.toArray(children)
21		.slice(0, max)
22		.reverse();
23	const remainingAvatars = max ? Math.max(totalAvatars - max, 1) : 0;
24 
25	return (
26		<div
27			className={cn("flex items-center flex-row-reverse", className)}
28			{...props}
29		>
30			{remainingAvatars > 0 && (
31				<Avatar className="-ml-2 hover:z-10 relative ring-2 ring-background">
32					<AvatarFallback className="bg-muted-foreground text-white">
33						+{remainingAvatars}
34					</AvatarFallback>
35				</Avatar>
36			)}
37			{displayedAvatars.map((avatar, index) => {
38				if (!React.isValidElement(avatar)) return null;
39 
40				return (
41					<div key={index} className="-ml-2 hover:z-10 relative">
42						{React.cloneElement(avatar as React.ReactElement<AvatarProps>, {
43							className: "ring-2 ring-background",
44						})}
45					</div>
46				);
47			})}
48		</div>
49	);
50};
51 
52export { AvatarGroup };