feat(platform): Add coin icon on block cost & current credits (#8124)

Significant-Gravitas · Sep 23, 2024 · 6e205cb · 6e205cb
1 parent 4ab3f42
commit 6e205cb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/autogpt_platform/frontend/src/components/CreditButton.tsx b/autogpt_platform/frontend/src/components/CreditButton.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { IconRefresh } from "@/components/ui/icons";
+import { IconRefresh, IconCoin } from "@/components/ui/icons";
 import AutoGPTServerAPI from "@/lib/autogpt-server-api";
 
 export default function CreditButton() {
@@ -24,7 +24,9 @@ export default function CreditButton() {
         variant="outline"
         className="flex items-center space-x-2 text-muted-foreground"
       >
-        <span>Credits: {credit}</span>
+        <span className="flex items-center">
+          <IconCoin /> {credit}
+        </span>
         <IconRefresh />
       </Button>
     )

diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -33,6 +33,7 @@ import { getPrimaryCategoryColor } from "@/lib/utils";
 import { FlowContext } from "./Flow";
 import { Badge } from "./ui/badge";
 import DataTable from "./DataTable";
+import { IconCoin } from "./ui/icons";
 
 type ParsedKey = { key: string; index?: number };
 
@@ -577,8 +578,10 @@ export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
         </div>
       </div>
       {blockCost && (
-        <div className="p-3 text-right font-semibold">
-          Cost: {blockCost.cost_amount} / {blockCost.cost_type}
+        <div className="p-3 font-semibold">
+          <span className="ml-auto flex items-center">
+            <IconCoin /> {blockCost.cost_amount} per {blockCost.cost_type}
+          </span>
         </div>
       )}
       {data.uiType !== BlockUIType.NOTE ? (

diff --git a/autogpt_platform/frontend/src/components/ui/icons.tsx b/autogpt_platform/frontend/src/components/ui/icons.tsx
@@ -301,6 +301,34 @@ export const IconRefresh = createIcon((props) => (
   </svg>
 ));
 
+/**
+ * Coin icon component.
+ *
+ * @component IconCoin
+ * @param {IconProps} props - The props object containing additional attributes and event handlers for the icon.
+ * @returns {JSX.Element} - The coins icon.
+ *
+ */
+export const IconCoin = createIcon((props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="8" cy="8" r="6" />
+    <path d="M18.09 10.37A6 6 0 1 1 10.34 18" />
+    <path d="M7 6h1v4" />
+    <path d="m16.71 13.88.7.71-2.82 2.82" />
+  </svg>
+));
+
 /**
  * Menu icon component.
  *