-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathButtonComponents.tsx
More file actions
255 lines (242 loc) · 7.04 KB
/
ButtonComponents.tsx
File metadata and controls
255 lines (242 loc) · 7.04 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
import { cls } from "@/lib/utils";
import { BaseBtn, Content, ContentLeftAlign, PlusIcon } from "@/components/button/ButtonSetting";
import { FaCrown, FaCircle } from "react-icons/fa";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { ReactNode } from "react";
import { boolean } from "zod";
// 1. 버튼 텍스트가 정해져있는 경우
// 1) 컬럼 추가
export const AddColumnBtn = ({ onClick }: any) => {
return (
<BaseBtn onClick={onClick}>
<Content extra="h-[66px] w-[329px] text-lg md:h-[70px] md:w-[574px] md:text-xl xl:h-[70px] xl:w-[354px] font-bold">
새로운 컬럼 추가하기
<PlusIcon />
</Content>
</BaseBtn>
);
};
//2) 대시보드 추가
export const AddDashboardBtn = ({ onClick }: any) => {
return (
<BaseBtn onClick={onClick}>
<Content extra="font-semibold text-base h-[58px] md:h-[66px] md:text-lg xl:h-[70px] font-bold">
새로운 대시보드
<PlusIcon />
</Content>
</BaseBtn>
);
};
//3) 투두 추가
export const AddTodoBtn = ({ onClick }: { onClick: () => void }) => {
return (
<BaseBtn onClick={onClick}>
<Content extra="h-8 md:h-[40px] w-full">
<PlusIcon />
</Content>
</BaseBtn>
);
};
//4) 대시보드 삭제
export const DeleteDashboardBtn = ({ onClick, disabled }: { onClick: () => void; disabled?: boolean }) => {
return (
<BaseBtn onClick={onClick} disabled={disabled} extra="bg-gray03">
<Content extra="h-[52px] w-[284px] text-lg font-medium md:h-[62px] md:w-80 md:text-xl">대시보드 삭제하기</Content>
</BaseBtn>
);
};
// 2. 버튼 내부에 들어갈 요소를 prop으로 받는 경우
// 1) 대시보드 카드 (사이드바)
export const DashboardCard = ({
dashboardName,
isMine,
color,
onClick,
}: {
dashboardName: string;
isMine: boolean;
color: string;
onClick: any;
}) => {
return (
<BaseBtn onClick={onClick}>
<ContentLeftAlign extra="flex gap-1 md:gap-1.5 xl:gap-2 h-[58px] w-[260px] text-lg font-semibold md:h-[68px] md:w-[247px] md:text-xl xl:w-[332px] xl:h-[70px]">
<FaCircle className="mr-2 size-[8px] md:mr-[9px] xl:mr-4" fill={color} />
{dashboardName}
{isMine ? <FaCrown fill="#FDD446" /> : <></>}
</ContentLeftAlign>
</BaseBtn>
);
};
// 2) form 채웠을때 활성화되는 버튼 (로그인, 회원가입, 각종 모달)
export const ActiveBtn = ({
disabled,
children,
onClick,
}: {
disabled: boolean;
children: ReactNode;
onClick: any;
}) => {
return (
<button
onClick={onClick}
type="submit"
disabled={disabled}
className={cls(
"flex h-[50px] w-full items-center justify-center rounded-lg text-xl font-medium text-white",
disabled ? "cursor-not-allowed bg-gray02" : "bg-violet01"
)}
>
{children}
</button>
);
};
//3) 삭제 / 피그마 표기 : Component24
export const DeleteCancelBtn = ({ children, onClick }: { children: string; onClick: any }) => {
return (
<BaseBtn extra="rounded-[4px]" onClick={onClick}>
<Content extra="text-violet01 font-medium text-xs md:text-base w-[52px] h-8 md:w-[84px]">{children}</Content>
</BaseBtn>
);
};
//4) 입력 / 피그마 표기 : Component24
export const InsertBtn = ({ children, disabled, onClick }: { children: string; disabled?: boolean; onClick: any }) => {
return (
<BaseBtn
extra={cls("rounded-[4px] size-full", disabled ? "cursor-not-allowed" : "")}
onClick={onClick}
disabled={disabled}
>
<Content extra={cls("font-medium text-xs w-[84px] h-7 md:h-8", disabled ? "text-gray02" : "text-violet01")}>
{children}
</Content>
</BaseBtn>
);
};
//5) 취소 / 피그마 표기 : modal
export const CancelBtn = ({
children,
onClick,
type,
...props
}: {
children: string;
onClick: any;
type?: string;
props?: any;
}) => {
return (
<BaseBtn extra="size-full" onClick={onClick} type={type} props={props}>
<Content extra="text-gray01 font-medium text-xs md:text-lg">{children}</Content>
</BaseBtn>
);
};
// 6) 확인 / 피그마 표기 : modal
export const ConfirmBtn = ({
children,
onClick,
disabled,
extra,
type,
...props
}: {
disabled?: boolean;
children: ReactNode;
onClick?: any;
type?: string;
extra?: any;
props?: any;
}) => {
return (
<BaseBtn
type={type}
disabled={disabled}
extra={cls("size-full", disabled ? "cursor-not-allowed" : "")}
onClick={onClick}
props={props}
>
<Content
extra={cls(disabled ? "bg-gray02" : "bg-violet01", "text-white font-semibold text-xs w-full h-full md:text-lg")}
>
{children}
</Content>
</BaseBtn>
);
};
//초대 수락/거절 버튼
export const AcceptBtn = ({ children, onClick }: { children: string; onClick: any }) => {
return (
<BaseBtn onClick={onClick}>
<Content extra="w-[109px] h-8 md:w-[72px] md:h-[30px] xl:w-[84px] xl:h-8 bg-violet01 text-white font-medium text-xs md:text-base">
{children}
</Content>
</BaseBtn>
);
};
export const RefuseBtn = ({ children, onClick }: { children: string; onClick: any }) => {
return (
<BaseBtn onClick={onClick}>
<Content extra="w-[109px] h-8 md:w-[72px] md:h-[30px] xl:w-[84px] xl:h-8 bg-white text-violet01 font-medium text-xs md:text-base">
{children}
</Content>
</BaseBtn>
);
};
// 7) 수락 거절 버튼(위 2개 세트) / 피그마 표기 : button
export const CombiBtn = ({
value,
onClickAccept,
onClickRefuse,
}: {
value: string[];
onClickAccept: any;
onClickRefuse: any;
}) => {
if (!Array.isArray(value) || value.length < 2) {
console.error("CombiBtn 컴포넌트는 [문자열, 문자열] 을 value 속성으로 받아야합니다.");
return null;
}
return (
<div className="flex w-full justify-center space-x-2.5">
<AcceptBtn onClick={onClickAccept}>{value[0]}</AcceptBtn>
<RefuseBtn onClick={onClickRefuse}>{value[1]}</RefuseBtn>
</div>
);
};
// 8) 페이지네이션 버튼
export const PaginationBtn = ({
disabledPrev,
disabledNext,
onClickPrev,
onClickNext,
}: {
disabledPrev: boolean;
disabledNext: boolean;
onClickPrev: any;
onClickNext: any;
}) => {
return (
<div className="flex h-[36px] w-[72px] items-center justify-center overflow-hidden rounded-[4px] border border-gray03 md:h-10 md:w-20">
<button
onClick={onClickPrev}
type="button"
disabled={disabledPrev}
className={cls(
"flex size-full items-center justify-center border-r border-gray03",
disabledPrev ? "cursor-not-allowed" : ""
)}
>
<IoIosArrowBack className={cls("size-4", disabledPrev ? "text-gray03" : "text-black03")} />
</button>
<button
onClick={onClickNext}
type="button"
disabled={disabledNext}
className={cls("flex size-full items-center justify-center", disabledNext ? "cursor-not-allowed" : "")}
>
<IoIosArrowForward className={cls("size-4", disabledNext ? "text-gray03" : "text-black03")} />
</button>
</div>
);
};