bigbuffet-rw/app/soapbox/components/ui/menu/menu.tsx
Justin 20209c81ab Improve visuals with branding
Co-authored-by: Alex Gleason <alex@alexgleason.me>
2022-08-01 14:40:07 -04:00

34 lines
921 B
TypeScript

import {
Menu,
MenuButton,
MenuItem,
MenuItems,
MenuPopover,
MenuLink,
MenuPopoverProps,
} from '@reach/menu-button';
import { positionDefault, positionRight } from '@reach/popover';
import React from 'react';
import './menu.css';
interface IMenuList extends Omit<MenuPopoverProps, 'position'> {
/** Position of the dropdown menu. */
position?: 'left' | 'right'
}
/** Renders children as a dropdown menu. */
const MenuList: React.FC<IMenuList> = (props) => (
<MenuPopover position={props.position === 'left' ? positionDefault : positionRight}>
<MenuItems
onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
className='py-1 bg-white dark:bg-primary-900 rounded-lg shadow-menu'
{...props}
/>
</MenuPopover>
);
/** Divides menu items. */
const MenuDivider = () => <hr />;
export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink };