refactoring some files.

src/components/wrappers/common/button/ButtonWithConfirm/ButtonWithConfirm.tsx

@@ -0,0 +1,45 @@
+"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()
+                } 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>
+    )
+}

src/components/wrappers/common/button/ButtonWithLoading/ButtonWithLoading.tsx

@@ -0,0 +1,59 @@
+"use client"
+import {Button} from "@/components/ui/button";
+import {ButtonHTMLAttributes, 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 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>
+    )
+}

src/components/wrappers/common/button/copy-button.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {useEffect, useState} from "react";
+import {CheckIcon, ClipboardIcon, Copy} from "lucide-react";
+import {Button, buttonVariants} from "@/components/ui/button";
+import {cn} from "@/lib/utils";
+import {useTranslations} from "use-intl";
+
+
+export async function copyToClipboardWithMeta(value: string) {
+    navigator.clipboard.writeText(value)
+}
+
+
+export type CopyButtonProps = {
+    value: string
+}
+
+
+export const CopyButton = (props: CopyButtonProps) => {
+
+    const {value} = props
+
+    const [hasCopied, setHasCopied] = useState(false)
+
+    useEffect(() => {
+        setTimeout(() => {
+            setHasCopied(false)
+        }, 2000)
+    }, [hasCopied])
+
+    return (
+        <Button
+            // className={cn(buttonVariants({size: "sm"}))}
+            onClick={() => {
+                copyToClipboardWithMeta(value)
+                setHasCopied(true)
+            }}
+            {...props}
+        >
+            <span className="mr-2">Copy</span>
+            {hasCopied ? <CheckIcon/> : <Copy size="18"/>}
+        </Button>
+    )
+}