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