Hover Card

1"use client";
2 
3import { PreviewCard as HoverCardPrimitive } from "@base-ui/react/preview-card";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8const HoverCard = ({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) => (
9  <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
10);
11 
12const HoverCardTrigger = ({
13  asChild = false,
14  children,
15  ...props
16}: React.ComponentProps<typeof HoverCardPrimitive.Trigger> & {
17  asChild?: boolean;
18}) => {
19  const render =
20    asChild && React.isValidElement(children) ? (children as React.ReactElement) : undefined;
21 
22  return (
23    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" render={render} {...props}>
24      {asChild ? null : children}
25    </HoverCardPrimitive.Trigger>
26  );
27};
28 
29const HoverCardContent = ({
30  asChild = false,
31  children,
32  className,
33  align = "center",
34  alignOffset = 0,
35  side = "bottom",
36  sideOffset = 4,
37  ...props
38}: React.ComponentProps<typeof HoverCardPrimitive.Popup> &
39  Pick<
40    React.ComponentProps<typeof HoverCardPrimitive.Positioner>,
41    "align" | "alignOffset" | "side" | "sideOffset"
42  > & {
43    asChild?: boolean;
44  }) => {
45  const render =
46    asChild && React.isValidElement(children) ? (children as React.ReactElement) : undefined;
47 
48  return (
49    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
50      <HoverCardPrimitive.Positioner
51        align={align}
52        alignOffset={alignOffset}
53        className="isolate z-50"
54        side={side}
55        sideOffset={sideOffset}
56      >
57        <HoverCardPrimitive.Popup
58          className={cn(
59            "data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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-72 origin-(--transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-soft outline-hidden data-closed:animate-out data-open:animate-in",
60            className,
61          )}
62          data-slot="hover-card-content"
63          render={render}
64          {...props}
65        >
66          {asChild ? null : children}
67        </HoverCardPrimitive.Popup>
68      </HoverCardPrimitive.Positioner>
69    </HoverCardPrimitive.Portal>
70  );
71};
72 
73export { HoverCard, HoverCardTrigger, HoverCardContent };