1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import cx from 'classnames';import { Link } from 'gatsby';import { Icon } from '../components';
export const Button = ({  type = 'button',  onClick,  icon = undefined,  disabled = false,  to,  external = false,  dark = false,  bold = false,  small = false,  className = '',  children,  ...rest}) => {  const buttonClassNames = cx(    'inline-flex select-none items-center border dark:!shadow-none',    bold && 'font-medium',    !small      ? 'space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg'      : 'space-x-2 rounded px-3 py-1.5 text-xs shadow-sm sm:rounded-md',    !dark      ? 'border-gray-200 bg-gray-100 text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 dark:hover:!border-teal-800 dark:hover:bg-teal-950 dark:text-gray-300'      : 'border-gray-800 bg-gray-900 text-gray-300',    !disabled ? 'cursor-pointer' : 'cursor-not-allowed',    className,  );
  const iconClassNames = cx(    'flex-shrink-0 fill-current object-contain',    !small ? 'h-6 w-6' : 'h-4 w-4',    !dark ? 'text-gray-700 dark:text-gray-300' : 'text-gray-300',  );
  if (onClick && to) {    return (      <Link to={to} onClick={onClick} role="button" className={buttonClassNames} {...rest}>        {icon && <Icon icon={icon} className={iconClassNames} />}        <span>{children}</span>      </Link>    );  } else if (onClick) {    return (      <button        type="button"        onClick={onClick}        disabled={disabled}        className={buttonClassNames}        {...rest}      >        {icon && <Icon icon={icon} className={iconClassNames} />}        <span>{children}</span>      </button>    );  } else if (to && external) {    return (      <a href={to} target="_blank" rel="noreferrer" className={buttonClassNames} {...rest}>        {icon && <Icon icon={icon} className={iconClassNames} />}        <span>{children}</span>      </a>    );  } else if (to) {    return (      <Link to={to} className={buttonClassNames} {...rest}>        {icon && <Icon icon={icon} className={iconClassNames} />}        <span>{children}</span>      </Link>    );  } else {    return (      <button type={type} disabled={disabled} className={buttonClassNames} {...rest}>        {icon && <Icon icon={icon} className={iconClassNames} />}        <span>{children}</span>      </button>    );  }};