Hover Card

1'use client'
2 
3import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card'
4 
5import { cn } from '@/lib/utils'
6 
7function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
8  return <PreviewCardPrimitive.Root data-slot='hover-card' {...props} />
9}
10 
11function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
12  return <PreviewCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />
13}
14 
15function HoverCardContent({
16  className,
17  side = 'bottom',
18  sideOffset = 4,
19  align = 'center',
20  alignOffset = 4,
21  ...props
22}: PreviewCardPrimitive.Popup.Props &
23  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
24  return (
25    <PreviewCardPrimitive.Portal data-slot='hover-card-portal'>
26      <PreviewCardPrimitive.Positioner
27        align={align}
28        alignOffset={alignOffset}
29        side={side}
30        sideOffset={sideOffset}
31        className='isolate z-50'
32      >
33        <PreviewCardPrimitive.Popup
34          data-slot='hover-card-content'
35          className={cn(
36            'z-50 w-72 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-xs/relaxed text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
37            className,
38          )}
39          {...props}
40        />
41      </PreviewCardPrimitive.Positioner>
42    </PreviewCardPrimitive.Portal>
43  )
44}
45 
46export { HoverCard, HoverCardContent, HoverCardTrigger }