Avatar Group with Max

1import { BadgeCheck, BadgeMinus, BadgeX } from "lucide-react";
2import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
3 
4export default function AvatarBadge() {
5  return (
6    <div className="flex items-center gap-4">
7      <div className="relative">
8        <Avatar className="size-10">
9          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
10          <AvatarFallback>CN</AvatarFallback>
11        </Avatar>
12        <div className="absolute -right-0.5 -bottom-0.5 flex size-3.5 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground leading-none ring-2 ring-background">
13          3
14        </div>
15      </div>
16      <div className="relative">
17        <Avatar className="size-10">
18          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
19          <AvatarFallback>CN</AvatarFallback>
20        </Avatar>
21        <BadgeCheck className="absolute -right-1 -bottom-1 size-4.5 rounded-full fill-blue-500 text-white" />
22      </div>
23      <div className="relative">
24        <Avatar className="size-10">
25          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
26          <AvatarFallback>CN</AvatarFallback>
27        </Avatar>
28        <BadgeMinus className="absolute -right-1 -bottom-1 size-4.5 rounded-full fill-amber-500 text-white" />
29      </div>
30      <div className="relative">
31        <Avatar className="size-10">
32          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
33          <AvatarFallback>CN</AvatarFallback>
34        </Avatar>
35        <BadgeX className="absolute -right-1 -bottom-1 size-4.5 rounded-full fill-red-500 text-white" />
36      </div>
37    </div>
38  );
39}