Fixed button not being able to handle multiple children when asChild is done

src/frontend/src/components/ui/button.tsx

@@ -66,30 +66,31 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       newChildren = toTitleCase(children);
     }
     return (
-      <Comp
+      <Comp ref={ref} {...props}>
-        className={buttonVariants({ variant, size: "none" })}
+        <div className={buttonVariants({ variant, size: "none" })}>
-        ref={ref}
+          <div
-        {...props}
+            className={cn(
-      >
+              loading ? "opacity-100" : "opacity-0",
-        <div
+              "absolute self-center",
-          className={cn(
+            )}
-            loading ? "opacity-100" : "opacity-0",
+          >
-            "absolute self-center",
+            <ForwardedIconComponent
-          )}
+              name={"Loader2"}
-        >
+              className={"animate-spin"}
-          <ForwardedIconComponent name={"Loader2"} className={"animate-spin"} />
+            />
-        </div>
+          </div>
-        <div
+          <div
-          className={cn(
+            className={cn(
-            loading ? "opacity-0" : "opacity-100",
+              loading ? "opacity-0" : "opacity-100",
-            buttonVariants({
+              buttonVariants({
-              variant: "none",
+                variant: "none",
-              size,
+                size,
-              className: cn(buttonChildrenClasses, className),
+                className: cn(buttonChildrenClasses, className),
-            }),
+              }),
-          )}
+            )}
-        >
+          >
-          {newChildren}
+            {newChildren}
+          </div>
         </div>
       </Comp>
     );