41 lines
751 B
TypeScript
41 lines
751 B
TypeScript
import React from 'react';
|
|
import { Flex, FlexProps } from '@chakra-ui/react';
|
|
import MyIcon from './index';
|
|
|
|
type Props = FlexProps & {
|
|
icon: string;
|
|
size?: string;
|
|
onClick?: () => void;
|
|
hoverColor?: string;
|
|
};
|
|
|
|
const MyIconButton = ({
|
|
icon,
|
|
onClick,
|
|
hoverColor = 'primary.600',
|
|
size = '1rem',
|
|
...props
|
|
}: Props) => {
|
|
return (
|
|
<Flex
|
|
p={1}
|
|
color={'myGray.500'}
|
|
rounded={'sm'}
|
|
alignItems={'center'}
|
|
bg={'transparent'}
|
|
transition={'background 0.1s'}
|
|
cursor={'pointer'}
|
|
_hover={{
|
|
bg: 'myGray.05',
|
|
color: hoverColor
|
|
}}
|
|
onClick={onClick}
|
|
{...props}
|
|
>
|
|
<MyIcon name={icon as any} w={size} />
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default MyIconButton;
|