feat: icons for buttons

AElfProject · Aug 29, 2024 · cb2ffda · cb2ffda
1 parent a659b54
commit cb2ffda
Showing 1 changed file with 75 additions and 53 deletions.
diff --git a/components/build-deploy-panel.tsx b/components/build-deploy-panel.tsx
@@ -6,6 +6,7 @@ import { useCliCommands } from "./workspace/use-cli-commands";
 import useSWR, { mutate } from "swr";
 import { db } from "@/data/db";
 import { useWorkspaceId } from "./workspace/use-workspace-id";
+import { Download, Rocket, ShieldCheck, Wrench } from "lucide-react";
 
 export function BuildDeployPanel() {
   const commands = useCliCommands();
@@ -22,61 +23,82 @@ export function BuildDeployPanel() {
     }
   );
 
+  const buttons: Array<{
+    disabled: boolean;
+    title: string;
+    onClick: () => void;
+    icon: React.FunctionComponent<{ className?: string }>;
+  }> = [
+    {
+      disabled: isAuditing,
+      title: "AI Audit",
+      onClick: async () => {
+        setIsAuditing(true);
+        try {
+          await commands.audit();
+        } catch (err) {
+          console.log(err);
+        } finally {
+          setIsAuditing(false);
+        }
+      },
+      icon: ShieldCheck,
+    },
+    {
+      disabled: isBuilding,
+      title: "Build",
+      onClick: async () => {
+        try {
+          setIsBuilding(true);
+          await commands.build();
+          mutate(`deployable-${id}`);
+        } catch (err) {
+        } finally {
+          setIsBuilding(false);
+        }
+      },
+      icon: Wrench,
+    },
+    {
+      disabled: isBuilding || !isDeployable || isDeploying,
+      title: "Deploy",
+      onClick: async () => {
+        try {
+          setIsDeploying(true);
+          await commands.deploy();
+        } catch (err) {
+        } finally {
+          setIsDeploying(false);
+        }
+      },
+      icon: Rocket,
+    },
+    {
+      disabled: false,
+      title: "Export",
+      onClick: async () => {
+        try {
+          await commands.export();
+        } catch (err) {}
+      },
+      icon: Download,
+    },
+  ];
+
   return (
     <div className="p-4 border-b-2 flex gap-2">
-      <Button
-        disabled={isAuditing}
-        onClick={async () => {
-          setIsAuditing(true);
-          try {
-            await commands.audit();
-          } catch (err) {
-            console.log(err);
-          } finally {
-            setIsAuditing(false);
-          }
-        }}
-      >
-        AI Audit
-      </Button>
-      <Button
-        disabled={isBuilding}
-        onClick={async () => {
-          try {
-            setIsBuilding(true);
-            await commands.build();
-            mutate(`deployable-${id}`);
-          } catch (err) {
-          } finally {
-            setIsBuilding(false);
-          }
-        }}
-      >
-        Build
-      </Button>
-      <Button
-        disabled={!isDeployable || isDeploying}
-        onClick={async () => {
-          try {
-            setIsDeploying(true);
-            await commands.deploy();
-          } catch (err) {
-          } finally {
-            setIsDeploying(false);
-          }
-        }}
-      >
-        Deploy
-      </Button>
-      <Button
-        onClick={async () => {
-          try {
-            await commands.export();
-          } catch (err) {}
-        }}
-      >
-        Export
-      </Button>
+      {buttons.map((button) => (
+        <Button
+          key={button.title}
+          disabled={button.disabled}
+          title={button.title}
+          variant="ghost"
+          className="rounded-none p-2"
+          onClick={button.onClick}
+        >
+          <button.icon className="w-4 h-4" />
+        </Button>
+      ))}
     </div>
   );
 }