leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2import * as RadixPopover from "@radix-ui/react-popover";
3import { theme } from "tailwind.config";
4import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
5import { createContext, 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 return (
26 <RadixPopover.Root
27 open={props.open}
28 onOpenChange={(o) => {
29 setOpen(o);
30 props.onOpenChange?.(open);
31 }}
32 >
33 <PopoverOpenContext value={open}>
34 <RadixPopover.Trigger disabled={props.disabled} asChild={props.asChild}>
35 {props.trigger}
36 </RadixPopover.Trigger>
37 <RadixPopover.Portal>
38 <NestedCardThemeProvider>
39 <RadixPopover.Content
40 className={`
41 z-20 bg-bg-page
42 px-3 py-2
43 max-w-(--radix-popover-content-available-width)
44 max-h-(--radix-popover-content-available-height)
45 border border-border rounded-md shadow-md
46 overflow-y-scroll
47 ${props.className}
48 `}
49 side={props.side}
50 align={props.align ? props.align : "center"}
51 sideOffset={4}
52 collisionPadding={16}
53 onOpenAutoFocus={props.onOpenAutoFocus}
54 >
55 {props.children}
56 <RadixPopover.Arrow
57 asChild
58 width={16}
59 height={8}
60 viewBox="0 0 16 8"
61 >
62 <PopoverArrow
63 arrowFill={
64 props.arrowFill
65 ? props.arrowFill
66 : props.background
67 ? props.background
68 : theme.colors["bg-page"]
69 }
70 arrowStroke={
71 props.border ? props.border : theme.colors["border"]
72 }
73 />
74 </RadixPopover.Arrow>
75 </RadixPopover.Content>
76 </NestedCardThemeProvider>
77 </RadixPopover.Portal>
78 </PopoverOpenContext>
79 </RadixPopover.Root>
80 );
81};