refactor: remove two components and create a new one, reducing code and improving efficiency

components/ui/custom/CustomButtonClientAction.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Button, CircularProgress } from "@nextui-org/react";
+import clsx from "clsx";
+import { useFormStatus } from "react-dom";
+
+interface CustomButtonClientActionProps {
+  buttonLabel: string;
+  danger?: boolean;
+}
+
+export const CustomButtonClientAction = ({
+  buttonLabel,
+  danger = false,
+}: CustomButtonClientActionProps) => {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      className={clsx("bg-transparent border-none p-0 m-0 h-fit min-w-min", {
+        "text-danger": danger,
+      })}
+      spinner={<CircularProgress aria-label="Loading..." size="sm" />}
+      type="submit"
+      area-disabled={pending}
+    >
+      {buttonLabel}
+    </Button>
+  );
+};

components/ui/custom/index.ts

@@ -1,2 +1,3 @@
 export * from "./CustomBox";
+export * from "./CustomButtonClientAction";
 export * from "./CustomInput";