group update

src/components/button/PrimaryButton.tsx

@@ -7,6 +7,23 @@ interface ButtonProps {
   className?: string;
   onClick: () => void;
   children?: React.ReactNode;
+  color?: "primary" | "secondary" | "error" | "warning" | "success";
+}
+
+const ColorBgVariants = {
+  "primary": "bg-liquid-brightmain group-hover:ring-liquid-brightmain",
+  "secondary": "bg-liquid-darkmain group-hover:ring-liquid-darkmain",
+  "error": "bg-liquid-red group-hover:ring-liquid-red",
+  "warning": "bg-liquid-orange group-hover:ring-liquid-orange",
+  "success": "bg-liquid-green group-hover:ring-liquid-green",
+}
+
+const ColorTextVariants = {
+  "primary": "group-hover:text-liquid-brightmain ",
+  "secondary": "group-hover:text-liquid-brightmain ",
+  "error": "group-hover:text-liquid-red ",
+  "warning": "group-hover:text-liquid-orange ",
+  "success": "group-hover:text-liquid-green ",
 }
 
 export const PrimaryButton: React.FC<ButtonProps> = ({
@@ -15,6 +32,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
   className,
   onClick,
   children,
+  color = "secondary",
 }) => {
   return (
     <label
@@ -31,7 +49,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
           "rounded-[10px]",
           "group-hover:bg-liquid-lighter group-hover:ring-[1px] group-hover:ring-liquid-darkmain group-hover:ring-inset",
           "px-[16px] py-[8px]",
-          "bg-liquid-darkmain",
+          ColorBgVariants[color],
           disabled && "bg-liquid-lighter"
         )}
       >
@@ -58,7 +76,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
         <div
           className={cn(
             "transition-all duration-300 text-liquid-white text-[18px] font-bold p-0 m-0 leading-[23px]",
-            "group-hover:text-liquid-brightmain ",
+            ColorTextVariants[color],
             disabled && "text-liquid-light"
           )}
         >