Avatar with Hover Card

1import { CalendarIcon } from "lucide-react";
2import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar";
3import {
4  HoverCard,
5  HoverCardContent,
6  HoverCardTrigger,
7} from "@/registry/ui/hover-card";
8 
9export default function AvatarHoverCardDemo() {
10  return (
11    <HoverCard>
12      <HoverCardTrigger className="cursor-pointer">
13        <Avatar>
14          <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
15          <AvatarFallback>CN</AvatarFallback>
16        </Avatar>
17      </HoverCardTrigger>
18      <HoverCardContent className="w-full max-w-xs">
19        <div className="flex justify-between space-x-4">
20          <Avatar>
21            <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
22            <AvatarFallback>CN</AvatarFallback>
23          </Avatar>
24          <div className="space-y-1">
25            <h4 className="font-semibold text-sm">@shadcn</h4>
26            <p className="text-sm">
27              The founder of Shadcn UI. I own a computer.
28            </p>
29            <div className="flex items-center pt-2">
30              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
31              <span className="text-muted-foreground text-xs">
32                Joined December 2021
33              </span>
34            </div>
35          </div>
36        </div>
37      </HoverCardContent>
38    </HoverCard>
39  );
40}