47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { ReactNode, useState } from 'react';
|
|
|
|
import { LuMenu } from 'react-icons/lu';
|
|
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
|
|
import { Button } from '../ui/button';
|
|
|
|
|
|
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">
|
|
{/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
|
|
<Button variant="ghost" color="brand.500">
|
|
<LuMenu />
|
|
</Button>
|
|
</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 >
|
|
);
|
|
};
|