feat: add clone machine code

web/src/components/ButtonActionLoader.tsx

@@ -2,6 +2,14 @@
 
 import { LoadingIcon } from "@/components/LoadingIcon";
 import { callServerPromise } from "@/components/callServerPromise";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreVertical } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -33,3 +41,38 @@ export function ButtonAction({
     </button>
   );
 }
+
+export function ButtonActionMenu(props: {
+  title?: string;
+  actions: {
+    title: string;
+    action: () => Promise<any>;
+  }[];
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="gap-2" variant="outline" disabled={isLoading}>
+          {props.title}
+          {isLoading ? <LoadingIcon /> : <MoreVertical size={14} />}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        {props.actions.map((action) => (
+          <DropdownMenuItem
+            key={action.title}
+            onClick={async () => {
+              setIsLoading(true);
+              await callServerPromise(action.action());
+              setIsLoading(false);
+            }}
+          >
+            {action.title}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}