55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Menu, MenuList, MenuItem } from '@chakra-ui/react';
|
|
|
|
interface Props {
|
|
width: number;
|
|
offset?: [number, number];
|
|
Button: React.ReactNode;
|
|
menuList: {
|
|
isActive?: boolean;
|
|
child: React.ReactNode;
|
|
onClick: () => any;
|
|
}[];
|
|
}
|
|
|
|
const MyMenu = ({ width, offset = [0, 10], Button, menuList }: Props) => {
|
|
const menuItemStyles = {
|
|
borderRadius: 'sm',
|
|
py: 3,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
_hover: {
|
|
backgroundColor: 'myWhite.600',
|
|
color: 'hover.blue'
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Menu offset={offset} autoSelect={false} isLazy>
|
|
{Button}
|
|
<MenuList
|
|
minW={`${width}px !important`}
|
|
p={'6px'}
|
|
border={'1px solid #fff'}
|
|
boxShadow={'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'}
|
|
>
|
|
{menuList.map((item, i) => (
|
|
<MenuItem
|
|
key={i}
|
|
{...menuItemStyles}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
item.onClick && item.onClick();
|
|
}}
|
|
color={item.isActive ? 'hover.blue' : ''}
|
|
>
|
|
{item.child}
|
|
</MenuItem>
|
|
))}
|
|
</MenuList>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default MyMenu;
|