/
Button.tsx
123 lines (105 loc) · 3.68 KB
/
Button.tsx
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { ReactNode } from 'react';
export type ButtonProps = {
children: ReactNode;
type?: 'button' | 'submit';
style?:
| 'primary'
| 'secondary'
| 'bulk'
| 'outline'
| 'ghost'
| 'delete'
| 'delete-ghost';
size?: 'xs' | 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
align?: 'left';
gap?: 'md';
transition?: boolean;
onClick?: (e?: any) => void;
};
function Button({
children,
type = 'button',
style = 'primary',
size = 'md',
disabled,
loading,
align,
gap,
transition = true,
onClick
}: ButtonProps) {
const xs = 'p-1';
const sm = 'h-[2.5rem] px-3';
const md = 'h-[3rem] px-6';
const lg = 'h-[3.75rem] px-6';
function handleSize() {
let buttonSize;
if (size === 'xs') buttonSize = xs;
if (size === 'sm') buttonSize = sm;
if (size === 'md') buttonSize = md;
if (size === 'lg') buttonSize = lg;
return buttonSize;
}
const base = `${handleSize()} ${
size === 'lg' ? 'rounded' : 'rounded-lg'
} flex items-center ${align ? 'justify-start' : 'justify-center '} ${
gap ? 'gap-3' : 'gap-2'
} text-sm font-medium box-border w-full sm:w-auto disabled:cursor-not-allowed ${
transition ? 'transition-colors' : ''
}`;
const primary = `${base} bg-gradient-to-br from-primary bg-secondary hover:bg-primary active:from-secondary active:bg-secondary text-white disabled:from-primary disabled:bg-secondary disabled:opacity-50`;
const secondary = `${base} bg-black-100 hover:bg-black-200/50 active:bg-black-100 text-black-400 disabled:bg-black-100 disabled:opacity-50`;
const bulk = `${base} bg-white hover:bg-komiser-200 active:bg-komiser-300 text-secondary disabled:bg-white disabled:opacity-50`;
const outline = `${base} bg-transparent text-primary border-2 border-primary hover:bg-komiser-100 active:border-primary active:text-primary disabled:bg-transparent disabled:opacity-50`;
const ghost = `${base} bg-transparent hover:bg-black-400/10 active:bg-black-400/20 text-black-900/60 disabled:bg-transparent disabled:opacity-50`;
const deleteStyle = `${base} bg-error-600 text-white hover:bg-error-700 active:bg-error-600 disabled:bg-error-700 disabled:text-white/70`;
const deleteGhostStyle = `${base} bg-error-100 text-error-600 hover:bg-error-600 hover:text-white active:bg-error-100 active:text-error-600 disabled:bg-error-600 disabled:text-white`;
function handleStyle() {
let buttonStyle;
if (style === 'primary') buttonStyle = primary;
if (style === 'secondary') buttonStyle = secondary;
if (style === 'bulk') buttonStyle = bulk;
if (style === 'outline') buttonStyle = outline;
if (style === 'ghost') buttonStyle = ghost;
if (style === 'delete-ghost') buttonStyle = deleteGhostStyle;
if (style === 'delete') buttonStyle = deleteStyle;
return buttonStyle;
}
return (
<button
onClick={onClick}
type={type}
className={handleStyle()}
disabled={disabled || loading}
>
{loading && (
<>
<svg
className="animate-spin h-5 w-5 text-inherit"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</>
)}
{children}
</button>
);
}
export default Button;