fix: button confirm

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

@@ -1,10 +1,19 @@
-"use client"
+"use client";
-import {Button, ButtonVariantsProps} from "@/components/ui/button";
+import { Button, ButtonVariantsProps } from "@/components/ui/button";
-import {ReactNode, useState} from "react";
+import { ReactNode, useState } from "react";
-import {Loader2} from "lucide-react";
+import { Loader2 } from "lucide-react";
-import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {
-import {cn} from "@/lib/utils";
+  Popover,
-import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export type ButtonWithConfirmProps = {
   title: string;
@@ -45,7 +54,6 @@ export type ButtonWithConfirmProps = {
   isPending?: boolean;
 };
 
-
 export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
   const [isConfirming, setIsConfirming] = useState(false);
 
@@ -87,21 +95,24 @@ export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
         if (!isDisabled) setIsConfirming(true);
       }}
     >
-            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+      {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
       {props.button?.main.icon}
       {props.button?.main.text && <span>{props.button.main.text}</span>}
     </Button>
   ) : (
-        <div onClick={(e) => {
+    <div
+      onClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
         setIsConfirming(true);
-        }}>
+      }}
+    >
       {props.children}
     </div>
   );
 
-    const withTooltip = isLegacy && props.button?.main.tooltipText && isDisabled ? (
+  const withTooltip =
+    isLegacy && props.button?.main.tooltipText && isDisabled ? (
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -112,13 +123,13 @@ export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-    ) : triggerContent;
+    ) : (
+      triggerContent
+    );
 
   return (
     <Popover open={isConfirming} onOpenChange={setIsConfirming}>
-            <PopoverTrigger asChild>
+      <PopoverTrigger asChild>{withTooltip}</PopoverTrigger>
-                {withTooltip}
-            </PopoverTrigger>
       <PopoverContent
         className="w-80"
         onPointerDownOutside={(e) => e.preventDefault()}
@@ -137,21 +148,47 @@ export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
           <div className="grid gap-2">
             <Button
               onClick={handleConfirm}
-                            variant={isLegacy ? (props.button?.confirm.variant ?? "default") : "default"}
+              variant={
-                            size={isLegacy ? (props.button?.main.size ?? "default") : "default"}
+                isLegacy
-                            className={cn(isLegacy ? props.button?.main.className : "", "w-full")}
+                  ? (props.button?.confirm.variant ?? "default")
+                  : "default"
+              }
+              size={
+                isLegacy ? (props.button?.confirm.size ?? "default") : "default"
+              }
+              className={cn(
+                isLegacy ? props.button?.confirm.className : "",
+                "w-full",
+              )}
             >
-                            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+              {props.isPending && (
+                <Loader2 className="animate-spin mr-4" size={16} />
+              )}
               {isLegacy && props.button?.confirm.icon}
-                            <span>{isLegacy ? props.button?.confirm.text : (props.confirmButtonText ?? "Confirm")}</span>
+              <span>
+                {isLegacy
+                  ? props.button?.confirm.text
+                  : (props.confirmButtonText ?? "Confirm")}
+              </span>
             </Button>
             <Button
-                            variant={isLegacy ? (props.button?.cancel.variant ?? "outline") : "outline"}
+              variant={
+                isLegacy
+                  ? (props.button?.cancel.variant ?? "outline")
+                  : "outline"
+              }
               onClick={handleCancel}
-                            className={cn(isLegacy ? props.button?.main.className : "", "w-full")}
+              className={cn(
-                            size={isLegacy ? (props.button?.main.size ?? "default") : "default"}
+                isLegacy ? props.button?.cancel.className : "",
+                "w-full",
+              )}
+              size={
+                isLegacy ? (props.button?.cancel.size ?? "default") : "default"
+              }
             >
-                            {isLegacy ? (props.button?.cancel.text ?? "Cancel") : (props.cancelButtonText ?? "Cancel")}
+              {isLegacy
+                ? (props.button?.cancel.text ?? "Cancel")
+                : (props.cancelButtonText ?? "Cancel")}
             </Button>
           </div>
         </div>