avatar-stack

1import { Children, type ReactNode } from "react";
2import { cn } from "@/lib/utils";
3 
4export type AvatarStackProps = {
5  children: ReactNode;
6  className?: string;
7  animate?: boolean;
8  size?: number;
9};
10 
11export const AvatarStack = ({
12  children,
13  className,
14  animate = false,
15  size = 40,
16  ...props
17}: AvatarStackProps) => (
18  <div
19    className={cn(
20      "-space-x-1 flex items-center",
21      animate && "hover:space-x-0 [&>*]:transition-all",
22      className
23    )}
24    {...props}
25  >
26    {Children.map(children, (child, index) => {
27      if (!child) {
28        return null;
29      }
30 
31      return (
32        <div
33          className={cn(
34            "size-full shrink-0 overflow-hidden rounded-full",
35            '[&_[data-slot="avatar"]]:size-full',
36            className
37          )}
38          style={{
39            width: size,
40            height: size,
41            maskImage: index
42              ? `radial-gradient(circle ${size / 2}px at -${size / 4 + size / 10}px 50%, transparent 99%, white 100%)`
43              : "",
44          }}
45        >
46          {child}
47        </div>
48      );
49    })}
50  </div>
51);