Hover Card

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card"
import { CalendarDays, User } from "lucide-react"

export function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="#" className="text-primary underline underline-offset-4">
          Hover over me
        </a>
      </HoverCardTrigger>
      <HoverCardContent className="w-64">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
            <User className="h-5 w-5" />
          </div>
          <div>
            <p className="text-sm font-semibold">@johndoe</p>
            <p className="text-xs text-muted-foreground">Joined December 2021</p>
          </div>
        </div>
        <p className="mt-2 text-sm text-muted-foreground">
          Full-stack developer. Building cool things on the web.
        </p>
        <div className="mt-3 flex items-center gap-1 text-xs text-muted-foreground">
          <CalendarDays className="h-3 w-3" />
          Joined December 2021
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}