a tool for shared writing and social publishing
leaflet.pub
1import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
2import { theme } from "tailwind.config";
3import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
4import { PopoverArrow } from "./Icons/PopoverArrow";
5import { PopoverOpenContext } from "./Popover";
6import { useState } from "react";
7
8export const Separator = (props: { classname?: string }) => {
9 return (
10 <div className={`min-h-full border-r border-border ${props.classname}`} />
11 );
12};
13
14export const Menu = (props: {
15 open?: boolean;
16 trigger: React.ReactNode;
17 children: React.ReactNode;
18 align?: "start" | "end" | "center" | undefined;
19 alignOffset?: number;
20 side?: "top" | "bottom" | "right" | "left" | undefined;
21 background?: string;
22 border?: string;
23 className?: string;
24 onOpenChange?: (o: boolean) => void;
25 asChild?: boolean;
26}) => {
27 let [open, setOpen] = useState(props.open || false);
28 return (
29 <DropdownMenu.Root
30 onOpenChange={(o) => {
31 setOpen(o);
32 props.onOpenChange?.(o);
33 }}
34 open={props.open}
35 >
36 <PopoverOpenContext value={open}>
37 <DropdownMenu.Trigger asChild={props.asChild}>
38 {props.trigger}
39 </DropdownMenu.Trigger>
40 <DropdownMenu.Portal>
41 <NestedCardThemeProvider>
42 <DropdownMenu.Content
43 side={props.side ? props.side : "bottom"}
44 align={props.align ? props.align : "center"}
45 alignOffset={props.alignOffset ? props.alignOffset : undefined}
46 sideOffset={4}
47 collisionPadding={16}
48 className={`dropdownMenu z-20 bg-bg-page flex flex-col p-1 gap-0.5 border border-border rounded-md shadow-md ${props.className}`}
49 >
50 {props.children}
51 <DropdownMenu.Arrow
52 asChild
53 width={16}
54 height={8}
55 viewBox="0 0 16 8"
56 >
57 <PopoverArrow
58 arrowFill={
59 props.background
60 ? props.background
61 : theme.colors["bg-page"]
62 }
63 arrowStroke={
64 props.border ? props.border : theme.colors["border"]
65 }
66 />
67 </DropdownMenu.Arrow>
68 </DropdownMenu.Content>
69 </NestedCardThemeProvider>
70 </DropdownMenu.Portal>
71 </PopoverOpenContext>
72 </DropdownMenu.Root>
73 );
74};
75
76export const MenuItem = (props: {
77 children?: React.ReactNode;
78 className?: string;
79 onSelect: (e: Event) => void;
80 id?: string;
81}) => {
82 return (
83 <DropdownMenu.Item
84 id={props.id}
85 onSelect={(event) => {
86 props.onSelect(event);
87 }}
88 className={`
89 menuItem
90 z-10 py-1! px-2!
91 flex gap-2
92 ${props.className}
93 `}
94 >
95 {props.children}
96 </DropdownMenu.Item>
97 );
98};
99
100export const ShortcutKey = (props: { children: React.ReactNode }) => {
101 return (
102 <span>
103 <code className="min-w-6 w-fit text-xs text-primary bg-border-light border border-secondary rounded-md px-0.5 flex justify-center font-bold ">
104 {props.children}
105 </code>
106 </span>
107 );
108};