Move stuff around

src-web/components/core/IconButton.tsx

@@ -0,0 +1,35 @@
+import classnames from 'classnames';
+import { forwardRef } from 'react';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+import type { IconProps } from './Icon';
+import { Icon } from './Icon';
+
+type Props = IconProps & ButtonProps & { iconClassName?: string; iconSize?: IconProps['size'] };
+
+export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
+  { icon, spin, className, iconClassName, size = 'md', iconSize, ...props }: Props,
+  ref,
+) {
+  return (
+    <Button
+      ref={ref}
+      className={classnames(
+        className,
+        'text-gray-700 hover:text-gray-1000',
+        '!px-0',
+        size === 'md' && 'w-9',
+        size === 'sm' && 'w-9',
+      )}
+      size={size}
+      {...props}
+    >
+      <Icon
+        size={iconSize}
+        icon={icon}
+        spin={spin}
+        className={classnames(iconClassName, props.disabled && 'opacity-70')}
+      />
+    </Button>
+  );
+});