File size: 1,086 Bytes
eb1202c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import { HoverCard as Kobalte } from "@kobalte/core/hover-card"
import { ComponentProps, JSXElement, ParentProps, splitProps } from "solid-js"
export interface HoverCardProps extends ParentProps, Omit<ComponentProps<typeof Kobalte>, "children"> {
trigger: JSXElement
mount?: HTMLElement
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
}
export function HoverCard(props: HoverCardProps) {
const [local, rest] = splitProps(props, ["trigger", "mount", "class", "classList", "children"])
return (
<Kobalte gutter={4} {...rest}>
<Kobalte.Trigger as="div" data-slot="hover-card-trigger" tabIndex={-1}>
{local.trigger}
</Kobalte.Trigger>
<Kobalte.Portal mount={local.mount}>
<Kobalte.Content
data-component="hover-card-content"
classList={{
...local.classList,
[local.class ?? ""]: !!local.class,
}}
>
<div data-slot="hover-card-body">{local.children}</div>
</Kobalte.Content>
</Kobalte.Portal>
</Kobalte>
)
}
|