import * as React from "react"

import { cn } from "@/lib/utils"

export interface AvatarGroupUser {
  id: string
  name: string
  src?: string
}

export type AvatarGroupSize = "sm" | "md" | "lg"

export interface AvatarGroupProps {
  users: AvatarGroupUser[]
  max?: number
  size?: AvatarGroupSize
  className?: string
}

const sizeStyles: Record<AvatarGroupSize, string> = {
  sm: "h-7 w-7 text-[10px]",
  md: "h-9 w-9 text-xs",
  lg: "h-11 w-11 text-sm",
}

function AvatarGroup({
  users,
  max = 4,
  size = "md",
  className,
}: AvatarGroupProps) {
  const visibleUsers = users.slice(0, max)
  const overflowCount = Math.max(users.length - max, 0)

  return (
    <div className={cn("flex items-center", className)}>
      <div className="flex -space-x-3">
        {visibleUsers.map((user) => (
          <div
            key={user.id}
            className={cn(
              "flex items-center justify-center overflow-hidden rounded-full border border-border bg-muted text-foreground",
              sizeStyles[size]
            )}
            title={user.name}
          >
            {user.src ? (
              <img src={user.src} alt={user.name} className="h-full w-full object-cover" />
            ) : (
              <span className="font-semibold">{getInitials(user.name)}</span>
            )}
          </div>
        ))}
        {overflowCount > 0 ? (
          <div
            className={cn(
              "flex items-center justify-center rounded-full border border-border bg-card text-muted-foreground",
              sizeStyles[size]
            )}
          >
            <span className="font-semibold">+{overflowCount}</span>
          </div>
        ) : null}
      </div>
    </div>
  )
}

function getInitials(name: string) {
  const parts = name.trim().split(" ").filter(Boolean)
  if (parts.length === 0) return ""
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
  return `${parts[0][0]}${parts[1][0]}`.toUpperCase()
}

export { AvatarGroup }
Avatar Group

Dependencies

Files

Installation
