import { CalendarIcon } from "lucide-react"

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

export default function HoverCardProfile() {
  return (
    <HoverCard openDelay={150}>
      <HoverCardTrigger asChild>
        <Button variant="link">@shadcn</Button>
      </HoverCardTrigger>
      <HoverCardContent side="top" className="w-72">
        <div className="gap-3 flex">
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <div className="gap-1 text-sm flex flex-col">
            <span className="font-medium">shadcn</span>
            <span className="text-muted-foreground">
              Building components you copy, not install.
            </span>
            <span className="gap-1.5 mt-1 text-xs flex items-center text-muted-foreground">
              <CalendarIcon className="size-3.5" />
              Joined December 2021
            </span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}
Installation

Usage

Examples

Profile preview
