Avatar Group

import { AvatarGroup } from "@/components/ui/avatar-group";

export default function Example() {
  return <AvatarGroup />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const AvatarGroup = forwardRef(({ className, max = 5, children, ...props }, ref) => {
  const items = Array.isArray(children) ? children : [children];
  const visible = items.slice(0, max);
  const remaining = items.length - max;

  return (
    <div ref={ref} className={cn("flex -space-x-3", className)} {...props}>
      {visible.map((child, i) => (
        <div key={i} className="ring-2 ring-background rounded-full">{child}</div>
      ))}
      {remaining > 0 && (
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-xs font-medium ring-2 ring-background">
          +{remaining}
        </div>
      )}
    </div>
  );
});
AvatarGroup.displayName = "AvatarGroup";

export { AvatarGroup };