Avatar Circles

"use client";
import { AvatarCircles } from "@/registry/magic-ui/avatar-circles";

const avatarUrls = [
  {
    imageUrl: "https://picsum.photos/seed/av1/40/40",
    profileUrl: "https://example.com/user1",
  },
  {
    imageUrl: "https://picsum.photos/seed/av2/40/40",
    profileUrl: "https://example.com/user2",
  },
  {
    imageUrl: "https://picsum.photos/seed/av3/40/40",
    profileUrl: "https://example.com/user3",
  },
  {
    imageUrl: "https://picsum.photos/seed/av4/40/40",
    profileUrl: "https://example.com/user4",
  },
  {
    imageUrl: "https://picsum.photos/seed/av5/40/40",
    profileUrl: "https://example.com/user5",
  },
];

export default function Demo() {
  return (
    <div className="flex items-center justify-center w-full max-w-md p-8">
      <AvatarCircles avatarUrls={avatarUrls} numPeople={99} />
    </div>
  );
}

"use client"

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

interface Avatar {
  imageUrl: string
  profileUrl: string
}
interface AvatarCirclesProps {
  className?: string
  numPeople?: number
  avatarUrls: Avatar[]
}

export const AvatarCircles = ({
  numPeople,
  className,
  avatarUrls,
}: AvatarCirclesProps) => {
  return (
    <div className={cn("z-10 flex -space-x-4 rtl:space-x-reverse", className)}>
      {avatarUrls.map((url, index) => (
        <a
          key={index}
          href={url.profileUrl}
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            key={index}
            className="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800"
            src={url.imageUrl}
            width={40}
            height={40}
            alt={`Avatar ${index + 1}`}
          />
        </a>
      ))}
      {(numPeople ?? 0) > 0 && (
        <a
          className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
          href=""
        >
          +{numPeople}
        </a>
      )}
    </div>
  )
}