From 5bf608463c82e0ca315a6db1c74b92d6d87dd84d Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@gmail.com>
Date: Sat, 25 Jul 2026 02:03:33 +0530
Subject: [PATCH] fix: resolve Tailwind dynamic class bug and duplicate error
 rendering in Auth

---
 src/components/Button.tsx | 16 ++++++++++++++--
 src/pages/Auth/Auth.tsx   | 11 -----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index f73a3b0..4e34e8a 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,3 +1,15 @@
+const colorMap: Record<string, string> = {
+    mygreen: 'bg-mygreen',
+    myyellow: 'bg-myyellow',
+    myred: 'bg-myred',
+};
+
+const hoverMap: Record<string, string> = {
+    mygreen: 'hover:bg-mygreen',
+    myyellow: 'hover:bg-myyellow',
+    myred: 'hover:bg-myred',
+};
+
 interface ButtonProps {
     color?: string;
     hover?: string;
@@ -5,10 +17,10 @@ interface ButtonProps {
     onClick?: () => void;
 }
 
-function Button({ color, hover, text, onClick }: ButtonProps) {
+function Button({ color = 'mygreen', hover = 'mygreen', text, onClick }: ButtonProps) {
     return (
         <div className="flex items-center justify-center">
-            <button className={`btn bg-${color} hover:bg-${hover}  `} onClick={onClick}>
+            <button className={`btn ${colorMap[color] || 'bg-mygreen'} ${hoverMap[hover] || 'hover:bg-mygreen'}`} onClick={onClick}>
                 {text}
             </button>
         </div>
diff --git a/src/pages/Auth/Auth.tsx b/src/pages/Auth/Auth.tsx
index 0cab422..c72760f 100644
--- a/src/pages/Auth/Auth.tsx
+++ b/src/pages/Auth/Auth.tsx
@@ -531,17 +531,6 @@ function Auth() {
                         ))}
                       </ul>
                     )}
-
-                    {errors.password && (
-                      <ul
-                        className="px-2 text-xs mt-1"
-                        style={{ color: "red" }}
-                      >
-                        {errors.password.map((error, index) => (
-                          <li key={index}>{error}</li>
-                        ))}
-                      </ul>
-                    )}
                   </div>
                   <div className="mt-4 text-sm text-gray-600 text-right font-bold tracking-wider">
                     <Link to="#" onClick={handleForgotPasswordRequest}>