52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
import { Box } from '@chakra-ui/react';
|
|
import { LuMenu } from 'react-icons/lu';
|
|
|
|
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
|
|
|
|
export type MenuElement = {
|
|
icon?: ReactNode;
|
|
name: string;
|
|
onClick: () => void;
|
|
};
|
|
|
|
export type ContextMenuProps = {
|
|
elements?: MenuElement[];
|
|
};
|
|
|
|
export const ContextMenu = ({ elements }: ContextMenuProps) => {
|
|
if (!elements) {
|
|
return <></>;
|
|
}
|
|
return (
|
|
<MenuRoot data-testid="context-menu">
|
|
<MenuTrigger
|
|
asChild
|
|
marginY="auto"
|
|
marginRight="4px"
|
|
data-testid="context-menu_trigger"
|
|
>
|
|
<Box asChild color="brand.500" cursor="pointer">
|
|
<LuMenu />
|
|
</Box>
|
|
</MenuTrigger>
|
|
<MenuContent data-testid="context-menu_content">
|
|
{elements?.map((data) => (
|
|
<MenuItem
|
|
key={data.name}
|
|
value={data.name}
|
|
onClick={data.onClick}
|
|
height="65px"
|
|
fontSize="25px"
|
|
data-test-id="context-menu_item"
|
|
>
|
|
{data.icon}
|
|
{data.name}
|
|
</MenuItem>
|
|
))}
|
|
</MenuContent>
|
|
</MenuRoot>
|
|
);
|
|
};
|