Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.7 kB · 84 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485"use client";import * as RadixPopover from "@radix-ui/react-popover";import { theme } from "tailwind.config";import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";import { createContext, useEffect, useState } from "react";import { PopoverArrow } from "./Icons/PopoverArrow";
export const PopoverOpenContext = createContext(false);export const Popover = (props: { trigger: React.ReactNode; disabled?: boolean; children: React.ReactNode; align?: "start" | "end" | "center"; side?: "top" | "bottom" | "left" | "right"; background?: string; border?: string; className?: string; open?: boolean; onOpenChange?: (open: boolean) => void; onOpenAutoFocus?: (e: Event) => void; asChild?: boolean; arrowFill?: string;}) => { let [open, setOpen] = useState(props.open || false); useEffect(() => { if (props.open !== undefined) setOpen(props.open); }, [props.open]); return ( <RadixPopover.Root open={props.open} onOpenChange={(o) => { setOpen(o); props.onOpenChange?.(o); }} > <PopoverOpenContext value={open}> <RadixPopover.Trigger disabled={props.disabled} asChild={props.asChild}> {props.trigger} </RadixPopover.Trigger> <RadixPopover.Portal> <NestedCardThemeProvider> <RadixPopover.Content className={` z-20 bg-bg-page px-3 py-2 max-w-(--radix-popover-content-available-width) max-h-(--radix-popover-content-available-height) border border-border rounded-md shadow-md overflow-y-scroll ${props.className} `} side={props.side} align={props.align ? props.align : "center"} sideOffset={4} collisionPadding={16} onOpenAutoFocus={props.onOpenAutoFocus} > {props.children} <RadixPopover.Arrow asChild width={16} height={8} viewBox="0 0 16 8" > <PopoverArrow arrowFill={ props.arrowFill ? props.arrowFill : props.background ? props.background : theme.colors["bg-page"] } arrowStroke={ props.border ? props.border : theme.colors["border"] } /> </RadixPopover.Arrow> </RadixPopover.Content> </NestedCardThemeProvider> </RadixPopover.Portal> </PopoverOpenContext> </RadixPopover.Root> );};