diff options
author | Nikita Tchayka <nikitatchayka@gmail.com> | 2023-08-29 23:31:42 +0100 |
---|---|---|
committer | Nikita Tchayka <nikitatchayka@gmail.com> | 2023-08-29 23:31:42 +0100 |
commit | 18be2308873c50936c08d254ebb20afe1bdc318a (patch) | |
tree | 91b2303f1f4cd9a114f28d08fd374f7f7e338063 /src/components/Button.tsx | |
parent | c42528a68d0a13fd7b8d9e3448def4db35ef6096 (diff) | |
download | neohaskell.github.io-18be2308873c50936c08d254ebb20afe1bdc318a.tar.gz neohaskell.github.io-18be2308873c50936c08d254ebb20afe1bdc318a.tar.bz2 neohaskell.github.io-18be2308873c50936c08d254ebb20afe1bdc318a.zip |
Update
Diffstat (limited to 'src/components/Button.tsx')
-rw-r--r-- | src/components/Button.tsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..7dc64fd --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,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; |