Hover Card

1import { Button } from "@/components/ui/button"
2import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
3import { CalendarIcon } from 'lucide-react'
4import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
5
6export function DefaultHoverCard() {
7  return (
8    <HoverCard>
9      <HoverCardTrigger asChild>
10        <Button variant="link">@nextjs</Button>
11      </HoverCardTrigger>
12      <HoverCardContent className="w-80">
13        <div className="flex justify-between space-x-4">
14          <Avatar>
15            <AvatarImage src="/placeholder.svg?height=40&width=40" />
16            <AvatarFallback>VC</AvatarFallback>
17          </Avatar>
18          <div className="space-y-1">
19            <h4 className="text-sm font-semibold">@nextjs</h4>
20            <p className="text-sm">
21              The React Framework – created and maintained by Vercel.
22            </p>
23            <div className="flex items-center pt-2">
24              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
25              <span className="text-xs text-muted-foreground">
26                Joined December 2021
27              </span>
28            </div>
29          </div>
30        </div>
31      </HoverCardContent>
32    </HoverCard>
33  )
34}