components/Popover.tsx at debug/datetime · ajamesphillips.com/leaflet

a tool for shared writing and social publishing
leaflet / components / Popover.tsx
at debug/datetime 2.7 kB view raw
 1"use client";
 2import * as RadixPopover from "@radix-ui/react-popover";
 3import { theme } from "tailwind.config";
 4import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
 5import { createContext, useEffect, useState } from "react";
 6import { PopoverArrow } from "./Icons/PopoverArrow";
 7
 8export const PopoverOpenContext = createContext(false);
 9export const Popover = (props: {
10  trigger: React.ReactNode;
11  disabled?: boolean;
12  children: React.ReactNode;
13  align?: "start" | "end" | "center";
14  side?: "top" | "bottom" | "left" | "right";
15  background?: string;
16  border?: string;
17  className?: string;
18  open?: boolean;
19  onOpenChange?: (open: boolean) => void;
20  onOpenAutoFocus?: (e: Event) => void;
21  asChild?: boolean;
22  arrowFill?: string;
23}) => {
24  let [open, setOpen] = useState(props.open || false);
25  useEffect(() => {
26    if (props.open !== undefined) setOpen(props.open);
27  }, [props.open]);
28  return (
29    <RadixPopover.Root
30      open={props.open}
31      onOpenChange={(o) => {
32        setOpen(o);
33        props.onOpenChange?.(o);
34      }}
35    >
36      <PopoverOpenContext value={open}>
37        <RadixPopover.Trigger disabled={props.disabled} asChild={props.asChild}>
38          {props.trigger}
39        </RadixPopover.Trigger>
40        <RadixPopover.Portal>
41          <NestedCardThemeProvider>
42            <RadixPopover.Content
43              className={`
44              z-20 bg-bg-page
45              px-3 py-2
46              max-w-(--radix-popover-content-available-width)
47              max-h-(--radix-popover-content-available-height)
48              border border-border rounded-md shadow-md
49              overflow-y-scroll
50              ${props.className}
51            `}
52              side={props.side}
53              align={props.align ? props.align : "center"}
54              sideOffset={4}
55              collisionPadding={16}
56              onOpenAutoFocus={props.onOpenAutoFocus}
57            >
58              {props.children}
59              <RadixPopover.Arrow
60                asChild
61                width={16}
62                height={8}
63                viewBox="0 0 16 8"
64              >
65                <PopoverArrow
66                  arrowFill={
67                    props.arrowFill
68                      ? props.arrowFill
69                      : props.background
70                        ? props.background
71                        : theme.colors["bg-page"]
72                  }
73                  arrowStroke={
74                    props.border ? props.border : theme.colors["border"]
75                  }
76                />
77              </RadixPopover.Arrow>
78            </RadixPopover.Content>
79          </NestedCardThemeProvider>
80        </RadixPopover.Portal>
81      </PopoverOpenContext>
82    </RadixPopover.Root>
83  );
84};