Hover Card

import { Avatar, AvatarFallback } from '@jamie/ui/avatar'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@jamie/ui/hover-card'
import { CalendarDaysIcon } from 'lucide-react'
 
export function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger className="cursor-pointer text-sm font-medium underline decoration-dotted underline-offset-4">
        Sarah Chen
      </HoverCardTrigger>
      <HoverCardContent className="w-72">
        <div className="flex gap-3">
          <Avatar>
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <div className="flex flex-col gap-1">
            <p className="text-sm font-semibold">Sarah Chen</p>
            <p className="text-muted-foreground text-xs">Head of Product</p>
            <div className="text-muted-foreground flex items-center gap-1 pt-1 text-xs">
              <CalendarDaysIcon className="size-3" />
              <span>42 meetings this month</span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}