import { chakra, IconButton } from '@chakra-ui/react' import { MoreHorizontal, Download, Share } from 'react-feather' import { Menu, MenuItem } from 'general' const DownloadStyled = chakra(Download) const ShareStyled = chakra(Share) const MoreHorizontalStyled = chakra(MoreHorizontal) type Props = { onImport: () => void onExport: () => void } function MenuButtons({ onImport, onExport }: Props) { return ( <Menu arrow align="end" viewScroll="close" menuButton={ <IconButton aria-label="Foods actions" icon={<MoreHorizontalStyled size={20} pointerEvents="none" />} variant="outline" /> } > <MenuItem onClick={onImport}> <DownloadStyled pointerEvents="none" mr={3} /> Import custom foods </MenuItem> <MenuItem onClick={onExport}> <ShareStyled pointerEvents="none" mr={3} /> Export custom foods </MenuItem> </Menu> ) } export default MenuButtons