57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
|
import { DropdownMenu as RMenu } from 'radix-ui';
|
|
|
|
export const Menu = RMenu.Root;
|
|
export const MenuTrigger = RMenu.Trigger;
|
|
|
|
export const MenuContent = ({
|
|
children,
|
|
...props
|
|
}: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
|
|
<RMenu.Portal>
|
|
<RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
|
|
{children}
|
|
</RMenu.Content>
|
|
</RMenu.Portal>
|
|
);
|
|
|
|
export const MenuItem = ({
|
|
icon,
|
|
shortcut,
|
|
children,
|
|
...props
|
|
}: ComponentPropsWithoutRef<typeof RMenu.Item> & {
|
|
icon?: ReactNode;
|
|
shortcut?: string;
|
|
}) => (
|
|
<RMenu.Item className="modern-sk-menu-item" {...props}>
|
|
{icon && <span className="ph">{icon}</span>}
|
|
{children}
|
|
{shortcut && <span className="sc">{shortcut}</span>}
|
|
</RMenu.Item>
|
|
);
|
|
|
|
export const MenuSeparator = () => (
|
|
<RMenu.Separator className="modern-sk-menu-sep" />
|
|
);
|
|
|
|
export const MenuSurface = ({ children }: { children: ReactNode }) => (
|
|
<div className="modern-sk-menu">{children}</div>
|
|
);
|
|
|
|
export const MenuRow = ({
|
|
icon,
|
|
shortcut,
|
|
children,
|
|
}: {
|
|
icon?: ReactNode;
|
|
shortcut?: string;
|
|
children: ReactNode;
|
|
}) => (
|
|
<div className="modern-sk-menu-item">
|
|
{icon && <span className="ph">{icon}</span>}
|
|
{children}
|
|
{shortcut && <span className="sc">{shortcut}</span>}
|
|
</div>
|
|
);
|