Move stuff around

src-web/components/core/Button.tsx

@@ -0,0 +1,93 @@
+import classnames from 'classnames';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { Link } from 'react-router-dom';
+import { Icon } from './Icon';
+
+const colorStyles = {
+  custom: '',
+  default: 'text-gray-700 enabled:hover:bg-gray-700/10 enabled:hover:text-gray-1000',
+  gray: 'text-gray-800 bg-gray-100 enabled:hover:bg-gray-500/20 enabled:hover:text-gray-1000',
+  primary: 'bg-blue-400 text-white hover:bg-blue-500',
+  secondary: 'bg-violet-400 text-white hover:bg-violet-500',
+  warning: 'bg-orange-400 text-white hover:bg-orange-500',
+  danger: 'bg-red-400 text-white hover:bg-red-500',
+};
+
+export type ButtonProps = {
+  to?: string;
+  color?: keyof typeof colorStyles;
+  size?: 'sm' | 'md';
+  justify?: 'start' | 'center';
+  type?: 'button' | 'submit';
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
+  contentEditable?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  forDropdown?: boolean;
+  className?: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  title?: string;
+  tabIndex?: number;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Button = forwardRef<any, ButtonProps>(function Button(
+  {
+    to,
+    className,
+    children,
+    forDropdown,
+    color,
+    justify = 'center',
+    size = 'md',
+    ...props
+  }: ButtonProps,
+  ref,
+) {
+  if (typeof to === 'string') {
+    return (
+      <Link
+        ref={ref}
+        to={to}
+        className={classnames(
+          className,
+          'outline-none',
+          'border border-transparent focus-visible:border-blue-300',
+          'rounded-md flex items-center',
+          colorStyles[color || 'default'],
+          justify === 'start' && 'justify-start',
+          justify === 'center' && 'justify-center',
+          size === 'md' && 'h-9 px-3',
+          size === 'sm' && 'h-7 px-2.5 text-sm',
+        )}
+        {...props}
+      >
+        {children}
+        {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
+      </Link>
+    );
+  } else {
+    return (
+      <button
+        ref={ref}
+        className={classnames(
+          className,
+          'outline-none',
+          'border border-transparent focus-visible:border-blue-300',
+          'rounded-md flex items-center',
+          colorStyles[color || 'default'],
+          justify === 'start' && 'justify-start',
+          justify === 'center' && 'justify-center',
+          size === 'md' && 'h-9 px-3',
+          size === 'sm' && 'h-7 px-2.5 text-sm',
+        )}
+        {...props}
+      >
+        {children}
+        {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
+      </button>
+    );
+  }
+});