components/Layout.tsx at update/delete-leaflets · ajamesphillips.com/leaflet

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