Hover Card

1"use client"
2 
3import * as React from "react"
4import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
5 
6import { cn } from "@/lib/utils"
7 
8const HoverCard = HoverCardPrimitive.Root
9const HoverCardTrigger = HoverCardPrimitive.Trigger
10 
11function HoverCardContent({ className, align = "center", sideOffset = 9, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
12  return (
13    <HoverCardPrimitive.Portal>
14      <HoverCardPrimitive.Content
15        data-slot="hover-card-content"
16        align={align}
17        sideOffset={sideOffset}
18        className={cn("z-50 w-72 rounded-2xl border border-foreground/12 bg-popover/96 p-5 text-popover-foreground shadow-[0_24px_70px_-24px_color-mix(in_oklch,var(--foreground)_28%,transparent),inset_0_1px_0_color-mix(in_oklch,var(--background)_65%,transparent)] backdrop-blur-xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1.5 data-[side=top]:slide-in-from-bottom-1.5 motion-reduce:animate-none", className)}
19        {...props}
20      />
21    </HoverCardPrimitive.Portal>
22  )
23}
24 
25export { HoverCard, HoverCardContent, HoverCardTrigger }