Hover Card

"use client"

import { CalendarDaysIcon } from "lucide-react"

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

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#" className="text-mac-body font-medium text-mac-link hover:underline">
        @johnappleseed
      </HoverCardTrigger>
      <HoverCardContent className="w-72">
        <div className="flex gap-3">
          <Avatar className="size-10">
            <AvatarFallback className="bg-linear-to-b from-[#8ec5fc] to-[#3478f6] text-[15px]">JA</AvatarFallback>
          </Avatar>
          <div className="flex flex-col gap-1">
            <span className="font-semibold">John Appleseed</span>
            <span className="text-mac-label-secondary">Builds Mac apps with SwiftUI and the occasional web page.</span>
            <span className="flex items-center gap-1 text-mac-subheadline text-mac-label-tertiary">
              <CalendarDaysIcon className="size-3" /> Joined March 2019
            </span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}