Avatar Group with Max

1import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
2 
3export default function AvatarDemo() {
4  return (
5    <div className="flex items-start gap-10 rounded-lg border p-4 shadow-sm/3">
6      <div className="flex gap-3">
7        <Avatar className="size-10">
8          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
9          <AvatarFallback>CN</AvatarFallback>
10        </Avatar>
11        <div className="flex flex-col gap-1.5">
12          <div className="flex items-center gap-1 font-medium leading-none tracking-tight">
13            John Doe
14          </div>
15          <span className="text-muted-foreground text-sm leading-none">
16            Let's go to the park
17          </span>
18        </div>
19      </div>
20      <div className="flex flex-col justify-start gap-1">
21        <span className="text-muted-foreground text-xs">12:00 AM</span>
22        <div className="ms-auto flex h-5 w-fit min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-primary-foreground text-xs">
23          2
24        </div>
25      </div>
26    </div>
27  );
28}