Avatar with Ring

1import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
2 
3export default function AvatarRing() {
4  return (
5    <div className="flex items-center gap-4">
6      <Avatar className="ring-2 ring-ring ring-offset-2 ring-offset-background">
7        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
8        <AvatarFallback className="rounded-none">ER</AvatarFallback>
9      </Avatar>
10      <Avatar className="ring-2 ring-green-500 ring-offset-2 ring-offset-background">
11        <AvatarImage alt="@evilrabbit" src="https://github.com/leerob.png" />
12        <AvatarFallback className="rounded-md">LR</AvatarFallback>
13      </Avatar>
14      <div className="rounded-full bg-gradient-to-b from-red-500 to-blue-500 p-1">
15        <Avatar className="ring-2 ring-background">
16          <AvatarImage
17            alt="@evilrabbit"
18            src="https://github.com/evilrabbit.png"
19          />
20          <AvatarFallback>CN</AvatarFallback>
21        </Avatar>
22      </div>
23    </div>
24  );
25}