Hover Card

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { Component, ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as HoverCardPrimitive from "@kobalte/core/hover-card";
6

7
import { cn } from "~/lib/utils";
8

9
const HoverCardTrigger = <T extends ValidComponent = "a">(
10
  props: PolymorphicProps<T, HoverCardPrimitive.HoverCardTriggerProps<T>>,
11
) => {
12
  return (
13
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
14
  );
15
};
16

17
const HoverCard: Component<HoverCardPrimitive.HoverCardRootProps> = (props) => {
18
  return (
19
    <HoverCardPrimitive.Root data-slot="hover-card" gutter={4} {...props} />
20
  );
21
};
22

23
type HoverCardContentProps<T extends ValidComponent = "div"> =
24
  HoverCardPrimitive.HoverCardContentProps<T> & {
25
    class?: string | undefined;
26
  };
27

28
const HoverCardContent = <T extends ValidComponent = "div">(
29
  props: PolymorphicProps<T, HoverCardContentProps<T>>,
30
) => {
31
  const [local, others] = splitProps(props as HoverCardContentProps, ["class"]);
32
  return (
33
    <HoverCardPrimitive.Portal>
34
      <HoverCardPrimitive.Content
35
        data-slot="hover-card-content"
36
        class={cn(
37
          "z-50 w-64 rounded-base border-2 border-border bg-background p-4 text-foreground shadow-shadow outline-none 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 ui-opened:animate-in ui-opened:fade-in-0 ui-opened:zoom-in-95 ui-closed:animate-out ui-closed:fade-out-0 ui-closed:zoom-out-95",
38
          local.class,
39
        )}
40
        {...others}
41
      />
42
    </HoverCardPrimitive.Portal>
43
  );
44
};
45

46
export { HoverCard, HoverCardTrigger, HoverCardContent };