HoverCard

"use client";

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card";
import {
  Avatar,
  AvatarFallback,
} from "@dashboardpack/core/components/ui/avatar";

export default function HoverCardExample() {
  return (
    <div className="text-sm">
      <span className="text-muted-foreground">Project created by </span>
      <HoverCard openDelay={150}>
        <HoverCardTrigger
          href="#member"
          className="rounded font-medium text-primary underline underline-offset-4 outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          Alex Morgan
        </HoverCardTrigger>
        <HoverCardContent>
          <div className="flex gap-3">
            <Avatar>
              <AvatarFallback>AM</AvatarFallback>
            </Avatar>
            <div>
              <h3 className="text-sm font-semibold">Alex Morgan</h3>
              <p className="text-xs text-muted-foreground">
                Product designer · Apex Studio
              </p>
              <p className="mt-3 text-xs leading-relaxed">
                Building thoughtful experiences with the design systems team.
              </p>
            </div>
          </div>
        </HoverCardContent>
      </HoverCard>
      <p id="member" className="mt-4 text-xs text-muted-foreground">
        Hover or focus the name for supplementary details.
      </p>
    </div>
  );
}