Refactoring.

src/components/wrappers/common/button/button-with-loading.tsx

@@ -1,8 +1,66 @@
-"use client";
+// "use client";
+//
+// import { Button } from "@/components/ui/button";
+// import { ButtonHTMLAttributes } from "react";
+// import { Loader2 } from "lucide-react";
+//
+// export type VariantButton = {
+//     secondary: string;
+//     default: string;
+//     outline: string;
+//     ghost: string;
+//     link: string;
+//     destructive: string;
+// };
+// export type sizeButton = {
+//     default: string;
+//     icon: string;
+//     sm: string;
+//     lg: string;
+// };
+//
+// export type ButtonWithConfirmProps = {
+//     icon?: any;
+//     text: string;
+//     variant?: keyof VariantButton;
+//     className?: string;
+//     onClick: () => void;
+//     isPending?: boolean;
+//     size: keyof sizeButton;
+// };
+//
+// export const ButtonWithLoading = ({
+//     icon,
+//     text,
+//     variant,
+//     className,
+//     onClick,
+//     isPending,
+//     size,
+//     ...props // catch all remaining props
+// }: ButtonWithConfirmProps & ButtonHTMLAttributes<HTMLButtonElement>) => {
+//     return (
+//         <Button
+//             onClick={() => {
+//                 onClick();
+//             }}
+//             variant={variant ? variant : "default"}
+//             className={className}
+//             {...props} // forward the remaining props to the Button component
+//             size={size || "default"}
+//         >
+//             {isPending && <Loader2 className="animate-spin mr-4" size={16} />}
+//             {text}
+//             <>{icon ? icon : null}</>
+//         </Button>
+//     );
+// };
 
-import { Button } from "@/components/ui/button";
-import { ButtonHTMLAttributes } from "react";
+'use client'
+
+import { ButtonHTMLAttributes, ReactNode } from "react";
 import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export type VariantButton = {
     secondary: string;
@@ -12,46 +70,46 @@ export type VariantButton = {
     link: string;
     destructive: string;
 };
-export type sizeButton = {
+
+export type SizeButton = {
     default: string;
     icon: string;
     sm: string;
     lg: string;
 };
 
-export type ButtonWithConfirmProps = {
-    icon?: any;
-    text: string;
+export type ButtonWithLoadingProps = {
+    children?: string | ReactNode;
+    icon?: ReactNode;
     variant?: keyof VariantButton;
     className?: string;
-    onClick: () => void;
+    onClick?: () => void;
     isPending?: boolean;
-    size: keyof sizeButton;
-};
+    size?: keyof SizeButton;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const ButtonWithLoading = ({
-    icon,
-    text,
-    variant,
-    className,
-    onClick,
-    isPending,
-    size,
-    ...props // catch all remaining props
-}: ButtonWithConfirmProps & ButtonHTMLAttributes<HTMLButtonElement>) => {
+                                      icon,
+                                      children,
+                                      variant = "default",
+                                      className,
+                                      onClick,
+                                      isPending,
+                                      size = "default",
+                                      ...rest
+                                  }: ButtonWithLoadingProps) => {
     return (
         <Button
-            onClick={() => {
-                onClick();
-            }}
-            variant={variant ? variant : "default"}
+            onClick={() => onClick?.()}
+            variant={variant}
             className={className}
-            {...props} // forward the remaining props to the Button component
-            size={size || "default"}
+            size={size}
+            {...rest}
         >
-            {isPending && <Loader2 className="animate-spin mr-4" size={16} />}
-            {text}
+            {isPending && <Loader2 className="mr-2 animate-spin" size={16} />}
+            {children && children}
             <>{icon ? icon : null}</>
+            {/*{icon && <span className="ml-2">{icon}</span>}*/}
         </Button>
     );
 };