diff --git a/src/components/IconBox/index.tsx b/src/components/IconBox/index.tsx new file mode 100644 index 00000000..3c881d1b --- /dev/null +++ b/src/components/IconBox/index.tsx @@ -0,0 +1,35 @@ +import { Flex, IconButton, Text } from '@chakra-ui/react'; + +import { IconBoxProps } from './type'; + +const IconBox = ({ leftIcon, content, rightIcon, handleClick }: IconBoxProps) => { + return ( + + + + {content} + + {rightIcon && ( + + )} + + ); +}; + +export default IconBox; diff --git a/src/components/IconBox/type.ts b/src/components/IconBox/type.ts new file mode 100644 index 00000000..56a0b9e0 --- /dev/null +++ b/src/components/IconBox/type.ts @@ -0,0 +1,6 @@ +export interface IconBoxProps { + leftIcon: React.ReactElement; + content: string; + rightIcon?: React.ReactElement; + handleClick?: () => void; +} diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index b90fe50a..0973e96d 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -3,7 +3,6 @@ import { defineStyleConfig } from '@chakra-ui/react'; const Button = defineStyleConfig({ baseStyle: { borderRadius: 'full', - shadow: 'md', }, variants: { @@ -17,6 +16,13 @@ const Button = defineStyleConfig({ color: 'white', minW: '24', }, + transparent: { + bg: 'transparent', + color: 'white', + _hover: { + bg: 'transparent', + }, + }, }, sizes: {