hover-card

1import * as React from "react"
2import { HoverCard as HoverCardPrimitive } from "radix-ui"
3 
4import { cn } from "@/lib/utils"
5 
6function HoverCard({
7  ...props
8}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
9  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
10}
11 
12function HoverCardTrigger({
13  ...props
14}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
15  return (
16    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
17  )
18}
19 
20function HoverCardContent({
21  className,
22  align = "center",
23  sideOffset = 4,
24  ...props
25}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
26  return (
27    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
28      <HoverCardPrimitive.Content
29        data-slot="hover-card-content"
30        align={align}
31        sideOffset={sideOffset}
32        className={cn(
33          "bg-popover text-popover-foreground 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-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
34          className
35        )}
36        {...props}
37      />
38    </HoverCardPrimitive.Portal>
39  )
40}
41 
42export { HoverCard, HoverCardTrigger, HoverCardContent }