Avatar Circles

1"use client"
2 
3import { cn } from "@/lib/utils"
4 
5interface Avatar {
6  imageUrl: string
7  profileUrl: string
8}
9interface AvatarCirclesProps {
10  className?: string
11  numPeople?: number
12  avatarUrls: Avatar[]
13}
14 
15export const AvatarCircles = ({
16  numPeople,
17  className,
18  avatarUrls,
19}: AvatarCirclesProps) => {
20  return (
21    <div className={cn("z-10 flex -space-x-4 rtl:space-x-reverse", className)}>
22      {avatarUrls.map((url, index) => (
23        <a
24          key={index}
25          href={url.profileUrl}
26          target="_blank"
27          rel="noopener noreferrer"
28        >
29          <img
30            key={index}
31            className="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800"
32            src={url.imageUrl}
33            width={40}
34            height={40}
35            alt={`Avatar ${index + 1}`}
36          />
37        </a>
38      ))}
39      {(numPeople ?? 0) > 0 && (
40        <a
41          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"
42          href=""
43        >
44          +{numPeople}
45        </a>
46      )}
47    </div>
48  )
49}