Adding new version of the ButtonWithConfirm component.

src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Trash2 } from "lucide-react";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { useMutation } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import {Trash2} from "lucide-react";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {useMutation} from "@tanstack/react-query";
+import {useRouter} from "next/navigation";
+import {toast} from "sonner";
 import {deleteAgentAction} from "@/components/wrappers/dashboard/agent/button-delete-agent/delete-agent.action";
 
 export type ButtonDeleteAgentProps = {
@@ -29,14 +29,31 @@ export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => {
 
     return (
         <ButtonWithConfirm
-            text={props.text ? props.text : ""}
-            onClick={() => {
-                mutation.mutate();
+            title={props.text ? props.text : ""}
+            description="Are you sure you want to remove this agent? This action cannot be undone."
+            button={{
+                main: {
+                    text: props.text ? props.text : "",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
-            variant={"destructive"}
             isPending={mutation.isPending}
-            className="gap-2"
-            icon={<Trash2 />}
         />
     );
 };

src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx

@@ -1,11 +1,12 @@
 "use client";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { deleteOrganizationAction } from "@/components/wrappers/dashboard/organization/organization.action";
-import { useMutation } from "@tanstack/react-query";
-import { setCurrentOrganizationSlug } from "@/features/dashboard/organization-cookie";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {deleteOrganizationAction} from "@/components/wrappers/dashboard/organization/organization.action";
+import {useMutation} from "@tanstack/react-query";
+import {setCurrentOrganizationSlug} from "@/features/dashboard/organization-cookie";
+import {useRouter} from "next/navigation";
+import {toast} from "sonner";
 import {authClient} from "@/lib/auth/auth-client";
+import {Trash2} from "lucide-react";
 
 export type DeleteOrganizationButtonProps = {
     organizationSlug: string;
@@ -38,13 +39,35 @@ export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) =
     });
 
     return (
+
         <ButtonWithConfirm
-            onClick={() => {
-                mutation.mutate();
+            title="Delete Organization"
+            description="Are you sure you want to remove this organization? This action cannot be undone."
+            button={{
+                main: {
+                    text: "Delete Organization",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
             isPending={mutation.isPending}
-            text="Delete Organization"
-            variant="destructive"
         />
+
+
     );
 };

src/components/wrappers/dashboard/profile/button-delete-account/button-delete-account.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { useMutation } from "@tanstack/react-query";
-import { Trash2 } from "lucide-react";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { signOut } from "@/lib/auth/auth-client";
-import { useRouter } from "next/navigation";
-import { deleteUserAction } from "./delete-account.action";
+import {useMutation} from "@tanstack/react-query";
+import {Trash2} from "lucide-react";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {signOut} from "@/lib/auth/auth-client";
+import {useRouter} from "next/navigation";
+import {deleteUserAction} from "./delete-account.action";
 
 export type ButtonDeleteAccountProps = {
     text?: string;
@@ -29,14 +29,33 @@ export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {
 
     return (
         <ButtonWithConfirm
-            text={props.text ? props.text : ""}
-            onClick={() => {
-                mutation.mutate();
+            title={props.text ? props.text : ""}
+            description="Are you sure you want to delete your account ? This action cannot be undone."
+            button={{
+                main: {
+                    text: props.text ? props.text : "",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
-            variant={"destructive"}
             isPending={mutation.isPending}
-            className="gap-2"
-            icon={<Trash2 />}
         />
+
+
     );
 };

src/components/wrappers/dashboard/projects/button-delete-project/button-delete-project.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { Trash2 } from "lucide-react";
-import { ButtonWithConfirm } from "@/components/wrappers/common/button/button-with-confirm";
-import { useMutation } from "@tanstack/react-query";
-import { deleteProjectAction } from "@/components/wrappers/dashboard/projects/button-delete-project/delete-project.action";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import {Trash2} from "lucide-react";
+import {ButtonWithConfirm} from "@/components/wrappers/common/button/button-with-confirm";
+import {useMutation} from "@tanstack/react-query";
+import {
+    deleteProjectAction
+} from "@/components/wrappers/dashboard/projects/button-delete-project/delete-project.action";
+import {useRouter} from "next/navigation";
+import {toast} from "sonner";
 
 export type ButtonDeleteProjectProps = {
     text?: string;
@@ -27,15 +29,33 @@ export const ButtonDeleteProject = (props: ButtonDeleteProjectProps) => {
     });
 
     return (
+
         <ButtonWithConfirm
-            text={props.text ? props.text : ""}
-            onClick={() => {
-                mutation.mutate();
+            title={props.text ? props.text : ""}
+            description="Are you sure you want to delete this project ? This action cannot be undone."
+            button={{
+                main: {
+                    text: props.text ? props.text : "",
+                    variant: "outline",
+                    icon: <Trash2 color="red"/>,
+                },
+                confirm: {
+                    className: "w-full",
+                    text: "Delete",
+                    icon: <Trash2/>,
+                    variant: "destructive",
+                    onClick: () => {
+                        mutation.mutate();
+                    },
+                },
+                cancel: {
+                    className: "w-full",
+                    text: "Cancel",
+                    icon: <Trash2/>,
+                    variant: "outline",
+                },
             }}
-            variant={"destructive"}
             isPending={mutation.isPending}
-            className="gap-2"
-            icon={<Trash2 />}
         />
     );
 };