Avatar with Text

1import { BadgeCheckIcon } from "lucide-react";
2import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
3 
4export default function AvatarDemo() {
5  return (
6    <div className="flex items-start gap-3">
7      <Avatar className="size-9">
8        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
9        <AvatarFallback>CN</AvatarFallback>
10      </Avatar>
11      <div className="flex flex-col gap-1">
12        <div className="flex items-center gap-1 font-semibold leading-none tracking-tight">
13          shadcn{" "}
14          <BadgeCheckIcon className="size-4.5 fill-blue-500 text-white" />
15        </div>
16        <span className="text-muted-foreground text-sm leading-none">
17          I own a computer
18        </span>
19      </div>
20    </div>
21  );
22}