Adding new version of the ButtonWithConfirm component.

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

@@ -1,45 +1,161 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-import { Loader2 } from "lucide-react";
-
-export type VariantButton = {
-    secondary: string;
-    default: string;
-    outline: string;
-    ghost: string;
-    link: string;
-    destructive: string;
-};
+// "use client";
+//
+// import { Button } from "@/components/ui/button";
+// import { useState } from "react";
+// import { Loader2 } from "lucide-react";
+//
+// export type VariantButton = {
+//     secondary: string;
+//     default: string;
+//     outline: string;
+//     ghost: string;
+//     link: string;
+//     destructive: string;
+// };
+//
+// export type ButtonWithConfirmProps = {
+//     icon?: any;
+//     text: string;
+//     variant?: keyof VariantButton;
+//     className?: string;
+//     onClick?: () => void;
+//     isPending?: boolean;
+// };
+//
+// export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
+//     const [isConfirming, setIsConfirming] = useState(false);
+//
+//     return (
+//         <Button
+//             onClick={() => {
+//                 if (isConfirming && props.onClick) {
+//                     props.onClick();
+//                 } else {
+//                     setIsConfirming(true);
+//                 }
+//             }}
+//             variant={props.variant ? props.variant : "default"}
+//             className={props.className}
+//         >
+//             {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
+//             {isConfirming ? "Are you sure ?" : `${props.text}`}
+//             <>{props.icon ? props.icon : null}</>
+//         </Button>
+//     );
+// };
+"use client"
+import {Button, ButtonVariantsProps} from "@/components/ui/button";
+import {useState} from "react";
+import {Loader2} from "lucide-react";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {cn} from "@/lib/utils";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
 
 export type ButtonWithConfirmProps = {
-    icon?: any;
-    text: string;
-    variant?: keyof VariantButton;
-    className?: string;
-    onClick?: () => void;
+    title: string;
+    description: string;
+    button: {
+        main: {
+            className?: string;
+            text?: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            disabled?: boolean;
+            tooltipText?: string;
+        };
+        confirm: {
+            className?: string;
+            text: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            onClick?: () => void;
+        };
+        cancel: {
+            className?: string;
+            text: string;
+            icon?: any;
+            variant?: ButtonVariantsProps["variant"];
+            size?: ButtonVariantsProps["size"];
+            onClick?: () => void;
+        };
+    };
     isPending?: boolean;
 };
 
+
 export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => {
     const [isConfirming, setIsConfirming] = useState(false);
 
     return (
-        <Button
-            onClick={() => {
-                if (isConfirming && props.onClick) {
-                    props.onClick();
-                } else {
-                    setIsConfirming(true);
-                }
-            }}
-            variant={props.variant ? props.variant : "default"}
-            className={props.className}
-        >
-            {props.isPending && <Loader2 className="animate-spin mr-4" size={16} />}
-            {isConfirming ? "Are you sure ?" : `${props.text}`}
-            <>{props.icon ? props.icon : null}</>
-        </Button>
+        <Popover open={isConfirming} onOpenChange={!props.button.main.disabled ? setIsConfirming : undefined}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                        <span
+                            className={cn(
+                                "inline-flex",
+                                props.button.main.disabled ? "cursor-not-allowed" : ""
+                            )}
+                            role="button">
+                          <Button
+                              disabled={!!props.button.main.disabled}
+                              variant={props.button.main.variant ?? "default"}
+                              size={props.button.main.size ?? "default"}
+                              className={props.button.main.className}
+                              onClick={() => {
+                                  if (!props.button.main.disabled) setIsConfirming(true);
+                              }}
+                          >
+                            {props.button.main.icon}
+                              {props.button.main.text && <span>{props.button.main.text}</span>}
+                          </Button>
+                        </span>
+                    </PopoverTrigger>
+                </TooltipTrigger>
+                {props.button.main.tooltipText && props.button.main.disabled && (
+                    <TooltipContent>
+                        <p>{props.button.main.tooltipText}</p>
+                    </TooltipContent>
+                )}
+            </Tooltip>
+            <PopoverContent className="w-80">
+                <div className="grid gap-4">
+                    <div className="space-y-2">
+                        <h4 className="font-medium leading-none">{props.title}</h4>
+                        <p className="text-sm text-muted-foreground">{props.description}</p>
+                    </div>
+                    <div className="grid gap-2">
+                        <Button
+                            onClick={() => {
+                                if (isConfirming && props.button.confirm.onClick) {
+                                    props.button.confirm.onClick();
+                                    setIsConfirming(false);
+                                } else {
+                                    setIsConfirming(true);
+                                }
+                            }}
+                            variant={props.button.confirm.variant ? props.button.confirm.variant : "default"}
+                            size={props.button.main.size ?? "default"}
+                            className={cn(props.button.main.className, "w-full")}
+                        >
+                            {props.isPending && <Loader2 className="animate-spin mr-4" size={16}/>}
+                            {props.button.confirm.icon ? props.button.confirm.icon : null}
+                            <span>{props.button.confirm.text}</span>
+                        </Button>
+                        <Button
+                            variant={props.button.cancel.variant ? props.button.cancel.variant : "default"}
+                            onClick={props.button.cancel.onClick ? () => props.button.cancel.onClick!() : () => setIsConfirming(false)}
+                            className={cn(props.button.main.className, "w-full")}
+                            size={props.button.main.size ?? "default"}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
     );
 };
+