feat(component): icon button component

apps/desktop/src/components/CopyBtn/CopyBtn.tsx → apps/desktop/src/components/UI/Button/copy-button.tsx

@@ -18,7 +18,7 @@ const Container = styled.span<ContainerProps>`
   color: ${(props) => (props.checking ? props.theme.successColor : props.theme.primaryFontColor)};
 `
 
-export const CopyBtn: FC<CopyBtnProps> = (props) => {
+export const CopyButton: FC<CopyBtnProps> = (props) => {
   const { text } = props
   const [checking, setChecking] = useState(false)
 

apps/desktop/src/components/UI/Button/icon-button.tsx

@@ -0,0 +1,25 @@
+import type { TooltipProps } from '@mui/material'
+import { Tooltip } from '@mui/material'
+import classNames from 'classnames'
+
+interface MfIconButtonProps {
+  icon: string
+  onClick: () => void
+  tooltipProps?: Omit<TooltipProps, 'children'>
+}
+
+export const MfIconButton = (props: MfIconButtonProps) => {
+  const { icon, onClick, tooltipProps } = props
+
+  const iconCls = classNames('icon', icon)
+
+  if (tooltipProps) {
+    return (
+      <Tooltip arrow {...tooltipProps}>
+        <i className={iconCls} onClick={onClick}></i>
+      </Tooltip>
+    )
+  }
+
+  return <i className={iconCls} onClick={onClick}></i>
+}

apps/desktop/src/components/UI/Button/index.ts

@@ -0,0 +1,2 @@
+export * from './icon-button'
+export * from './copy-button'