aboutsummaryrefslogtreecommitdiff
path: root/src/components/Button.tsx
diff options
context:
space:
mode:
authorNikita Tchayka <nikitatchayka@gmail.com>2023-08-29 23:31:42 +0100
committerNikita Tchayka <nikitatchayka@gmail.com>2023-08-29 23:31:42 +0100
commit18be2308873c50936c08d254ebb20afe1bdc318a (patch)
tree91b2303f1f4cd9a114f28d08fd374f7f7e338063 /src/components/Button.tsx
parentc42528a68d0a13fd7b8d9e3448def4db35ef6096 (diff)
downloadneohaskell.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.tsx78
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;