feat: action button in menu

client/src/features/editors/list/MenuActionButtons.jsx

@@ -1,18 +1,21 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import {
-  FiZap,
-  FiTrash2,
-} from 'react-icons/fi';
+import { FiZap, FiPlus, FiClock, FiMinusCircle } from 'react-icons/fi';
+import { useEffect } from 'react';
 
 export default function MenuActionButtons(props) {
+  const { actionHandler } = props;
   const menuStyle = {
     color: '#000000',
     backgroundColor: 'rgba(255,255,255,1)',
   };
 
+  useEffect(() =>{
+    console.log('debug action button render')
+  })
+
   return (
-    <Menu>
+    <Menu isLazy lazyBehavior='unmount'>
       <MenuButton
         as={IconButton}
         aria-label='Options'
@@ -24,8 +27,20 @@ export default function MenuActionButtons(props) {
         color={'orange.500'}
       />
       <MenuList style={menuStyle}>
-        <MenuItem icon={<FiTrash2 />} onClick={props.deleteAllHandler}>
+        {/* <MenuItem icon={<FiTrash2 />} onClick={props.deleteAllHandler}>
           Delete All
+        </MenuItem> */}
+        <MenuItem icon={<FiPlus />} onClick={() => actionHandler('event')}>
+          Event first
+        </MenuItem>
+        <MenuItem icon={<FiClock />} onClick={() => actionHandler('delay')}>
+          Delay first
+        </MenuItem>
+        <MenuItem
+          icon={<FiMinusCircle />}
+          onClick={() => actionHandler('block')}
+        >
+          Block first
         </MenuItem>
       </MenuList>
     </Menu>