A preview of a profile link

// apps/docs/examples/ui/hover-card.tsx'use client';
import {  Avatar,  AvatarFallback,} from '@workspace/active-ui/components/primitives/avatar';import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from '@workspace/active-ui/components/primitives/hover-card';
/** * A preview of what a link points to, shown while the pointer rests on the * link or the link has keyboard focus. The preview only adds to the link: * everything in it is also on the page the link opens. */export default function HoverCardExample() {  return (    <p className="text-sm">      Last changed by{' '}      <HoverCard>        <HoverCardTrigger          href="#hover-card-profile"          className="font-medium underline underline-offset-4"        >          Sam de Vries        </HoverCardTrigger>        <HoverCardContent className="w-72">          <div className="flex gap-3">            <Avatar>              <AvatarFallback>SV</AvatarFallback>            </Avatar>            <div className="flex flex-col gap-1">              <p className="font-medium">Sam de Vries</p>              <p className="text-muted-foreground text-sm">                Scheme administrator since March 2024.              </p>              <p className="text-muted-foreground text-xs">                12 schemes · Utrecht office              </p>            </div>          </div>        </HoverCardContent>      </HoverCard>{' '}      on 14 October.    </p>  );}