Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.8 kB · 97 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798"use client";import * as DropdownMenu from "@radix-ui/react-dropdown-menu";import { theme } from "tailwind.config";import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";import { PopoverArrow } from "./Icons/PopoverArrow";import { PopoverOpenContext } from "./Popover/PopoverContext";import { useState } from "react";
export const Menu = (props: { open?: boolean; trigger: React.ReactNode; children: React.ReactNode; align?: "start" | "end" | "center" | undefined; alignOffset?: number; side?: "top" | "bottom" | "right" | "left" | undefined; background?: string; border?: string; className?: string; onOpenChange?: (o: boolean) => void; asChild?: boolean;}) => { let [open, setOpen] = useState(props.open || false);
return ( <DropdownMenu.Root onOpenChange={(o) => { setOpen(o); props.onOpenChange?.(o); }} open={props.open} > <PopoverOpenContext value={open}> <DropdownMenu.Trigger asChild={props.asChild}> {props.trigger} </DropdownMenu.Trigger> <DropdownMenu.Portal> <NestedCardThemeProvider> <DropdownMenu.Content side={props.side ? props.side : "bottom"} align={props.align ? props.align : "center"} alignOffset={props.alignOffset ? props.alignOffset : undefined} sideOffset={4} collisionPadding={16} className={` dropdownMenu z-20 p-1 flex flex-col gap-0.5 bg-bg-page border border-border rounded-md shadow-md ${props.className}`} > {props.children} <DropdownMenu.Arrow asChild width={16} height={8} viewBox="0 0 16 8" > <PopoverArrow arrowFill={ props.background ? props.background : theme.colors["bg-page"] } arrowStroke={ props.border ? props.border : theme.colors["border"] } /> </DropdownMenu.Arrow> </DropdownMenu.Content> </NestedCardThemeProvider> </DropdownMenu.Portal> </PopoverOpenContext> </DropdownMenu.Root> );};
export const MenuItem = (props: { children?: React.ReactNode; className?: string; onSelect: (e: Event) => void; id?: string;}) => { return ( <DropdownMenu.Item id={props.id} onSelect={(event) => { props.onSelect(event); }} className={` menuItem ${props.className} `} > {props.children} </DropdownMenu.Item> );};