Popover

1import { Popover as KobaltePopover } from "@kobalte/core/popover";
2import { X } from "lucide-solid";
3import type { Component, ComponentProps, JSX } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7const Popover = KobaltePopover;
8const PopoverTrigger = KobaltePopover.Trigger;
9const PopoverAnchor = KobaltePopover.Anchor;
10 
11const PopoverContent: Component<
12  ComponentProps<typeof KobaltePopover.Content> & { showClose?: boolean }
13> = (props) => {
14  const [local, rest] = splitProps(props, ["class", "showClose", "children"]);
15  return (
16    <KobaltePopover.Portal>
17      <KobaltePopover.Content
18        class={cn(
19          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
20          "animate-in fade-in-0 zoom-in-95",
21          "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
22          local.class,
23        )}
24        {...rest}
25      >
26        {local.showClose !== false && (
27          <KobaltePopover.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
28            <X class="h-4 w-4" />
29            <span class="sr-only">Close</span>
30          </KobaltePopover.CloseButton>
31        )}
32        {local.children as JSX.Element}
33      </KobaltePopover.Content>
34    </KobaltePopover.Portal>
35  );
36};
37 
38const PopoverHeader: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
39  const [local, rest] = splitProps(props, ["class"]);
40  return <div class={cn("flex flex-col space-y-2", local.class)} {...rest} />;
41};
42 
43const PopoverTitle: Component<ComponentProps<typeof KobaltePopover.Title>> = (props) => {
44  const [local, rest] = splitProps(props, ["class"]);
45  return <KobaltePopover.Title class={cn("text-sm font-semibold", local.class)} {...rest} />;
46};
47 
48const PopoverDescription: Component<ComponentProps<typeof KobaltePopover.Description>> = (
49  props,
50) => {
51  const [local, rest] = splitProps(props, ["class"]);
52  return (
53    <KobaltePopover.Description
54      class={cn("text-sm text-muted-foreground", local.class)}
55      {...rest}
56    />
57  );
58};
59 
60export {
61  Popover,
62  PopoverTrigger,
63  PopoverAnchor,
64  PopoverContent,
65  PopoverHeader,
66  PopoverTitle,
67  PopoverDescription,
68};