refract make reusable components

client/src/features/menu/EventListMenu.jsx

@@ -8,6 +8,7 @@ import {
   MenuItem,
   MenuList,
 } from '@chakra-ui/react';
+import AddIconBtn from '../../common/components/buttons/AddIconBtn';
 import style from './EventListMenu.module.css';
 
 export default function EventListMenu(props) {
@@ -17,6 +18,10 @@ export default function EventListMenu(props) {
     variant: 'outline',
   };
 
+  const addHandler = () => {
+    eventsHandler('add', { type: 'event', order: 0 });
+  };
+
   return (
     <div className={style.headerButtons}>
       <Menu>
@@ -45,12 +50,7 @@ export default function EventListMenu(props) {
           <MenuItem>Download CSV</MenuItem>
         </MenuList>
       </Menu>
-      <IconButton
-        size='sm'
-        icon={<AddIcon />}
-        colorScheme='blue'
-        onClick={() => eventsHandler('add', { type: 'event', order: 0 })}
-      />
+      <AddIconBtn clickHandler={addHandler} size='sm' />
     </div>
   );
 }