Hover Card

1import { HoverCard as KobalteHoverCard } from "@kobalte/core/hover-card";
2import type { Component, ComponentProps } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6const HoverCard = KobalteHoverCard;
7const HoverCardTrigger = KobalteHoverCard.Trigger;
8 
9const HoverCardContent: Component<ComponentProps<typeof KobalteHoverCard.Content>> = (props) => {
10  const [local, rest] = splitProps(props, ["class"]);
11  return (
12    <KobalteHoverCard.Portal>
13      <KobalteHoverCard.Content
14        class={cn(
15          "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
16          "data-[expanded]:animate-in data-[closed]:animate-out",
17          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
18          "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
19          local.class,
20        )}
21        {...rest}
22      />
23    </KobalteHoverCard.Portal>
24  );
25};
26 
27export { HoverCard, HoverCardTrigger, HoverCardContent };