Update

2 files changed, 134 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;
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
new file mode 100644
index 0000000..0258e88
--- /dev/null
+++ b/src/components/Dialog.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import Button from "./Button";
+import classNames from "classnames";
+
+type DialogType = {
+  message: string;
+  width?: "fit" | "full" | "1/2" | "1/3";
+  cancelButtonText?: string;
+  actionButtonText?: string;
+  actionButtonColor?:
+    | "violet"
+    | "pink"
+    | "red"
+    | "orange"
+    | "yellow"
+    | "lime"
+    | "cyan";
+};
+
+const Dialog = ({
+  message,
+  width,
+  cancelButtonText,
+  actionButtonText,
+  actionButtonColor,
+}: DialogType) => {
+  return (
+    <div
+      className={classNames(
+        "px-8 py-4 dark:bg-slate-850 bg-white  border-4 border-black shadow-[8px_8px_0px_rgba(0,0,0,1)] grid place-content-center",
+        { "w-fit": width === "fit" },
+        { "w-full": width === "full" },
+        { "w-1/2": width === "1/2" },
+        { "w-1/3": width === "1/3" }
+      )}
+    >
+      <div>
+        <h1 className="text-2xl mb-4">{message}</h1>
+        <div className="flex space-x-2 mx-auto">
+          {cancelButtonText && (
+            <button className="text-base">{cancelButtonText}</button>
+          )}
+          {actionButtonText && (
+            <Button
+              buttonText={actionButtonText}
+              rounded="full"
+              color={actionButtonColor && actionButtonColor}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dialog;