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
|
import classNames from "classnames";
import React from "react";
type ButtonType = {
buttonText: string;
rounded?: "none" | "md" | "full";
size?: "sm" | "md" | "lg";
color?:
| "violet"
| "pink"
| "red"
| "orange"
| "yellow"
| "lime"
| "cyan"
| "";
disabled?: boolean;
};
const Button = ({
buttonText = "Enabled",
rounded = "none",
size = "md",
color = "cyan",
disabled,
}: ButtonType) => {
return (
<button
className={classNames(
"border-black border-2",
{
"bg-violet-200 hover:bg-violet-300 active:bg-violet-400":
color === "violet" && !disabled,
},
{
"bg-pink-200 hover:bg-pink-300 active:bg-pink-400":
color === "pink" && !disabled,
},
{
"bg-red-200 hover:bg-red-300 active:bg-red-400":
color === "red" && !disabled,
},
{
"bg-orange-200 hover:bg-orange-300 active:bg-orange-400":
color === "orange" && !disabled,
},
{
"bg-yellow-200 hover:bg-yellow-300 active:bg-yellow-400":
color === "yellow" && !disabled,
},
{
"bg-lime-200 hover:bg-lime-300 active:bg-lime-400":
color === "lime" && !disabled,
},
{
"bg-cyan-200 hover:bg-cyan-300 active:bg-cyan-400":
color === "cyan" && !disabled,
},
{ "rounded-none": rounded === "none" },
{ "rounded-md": rounded === "md" },
{ "rounded-full": rounded === "full" },
{ "h-10 px-4 hover:shadow-[2px_2px_0px_rgba(0,0,0,1)]": size === "sm" },
{ "h-12 px-5 hover:shadow-[2px_2px_0px_rgba(0,0,0,1)]": size === "md" },
{ "h-14 px-5 hover:shadow-[4px_4px_0px_rgba(0,0,0,1)]": size === "lg" },
{
"border-[#727272] bg-[#D4D4D4] text-[#676767] hover:bg-[#D4D4D4] hover:shadow-none active:bg-[#D4D4D4]":
disabled,
}
)}
disabled={disabled}
>
{buttonText}
</button>
);
};
export default Button;
|
