From c5d7d4f751011a9d08c547efef24cecd1b4301c0 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Wed, 1 Mar 2023 18:43:24 +0530
Subject: [PATCH] style: new primary button design

---
 apps/app/components/ui/button/index.ts        |  1 +
 .../components/ui/button/primary-button.tsx   | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 apps/app/components/ui/button/index.ts
 create mode 100644 apps/app/components/ui/button/primary-button.tsx

diff --git a/apps/app/components/ui/button/index.ts b/apps/app/components/ui/button/index.ts
new file mode 100644
index 000000000..2cfa60e09
--- /dev/null
+++ b/apps/app/components/ui/button/index.ts
@@ -0,0 +1 @@
+export * from "./primary-button";
diff --git a/apps/app/components/ui/button/primary-button.tsx b/apps/app/components/ui/button/primary-button.tsx
new file mode 100644
index 000000000..1f5eae836
--- /dev/null
+++ b/apps/app/components/ui/button/primary-button.tsx
@@ -0,0 +1,32 @@
+type TButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  size?: "sm" | "md" | "lg";
+};
+
+export const PrimaryButton: React.FC<TButtonProps> = (props) => {
+  const { children, className, onClick, type, disabled, loading, size = "md" } = props;
+
+  return (
+    <button
+      type={type}
+      className={`hover:bg-opacity-90 transition-colors text-white rounded-lg ${
+        size === "sm"
+          ? "px-2.5 py-1.5 text-sm"
+          : size === "md"
+          ? "px-3 py-2 text-base"
+          : "px-4 py-3 text-lg"
+      } ${disabled ? "bg-gray-400 cursor-not-allowed" : "bg-theme"} ${className || ""} ${
+        loading ? "cursor-wait" : ""
+      }`}
+      onClick={onClick}
+      disabled={disabled || loading}
+    >
+      <div className="flex items-center">{children}</div>
+    </button>
+  );
+};