github/deploy buttons (#13)

* fix checkmarks for runs

* deploy/github buttons

* fixes

Author: ctate

components/deploy-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { VERCEL_DEPLOY_URL } from "@/lib/constants";
+
+export function DeployButton() {
+  return (
+    <Button
+      asChild
+      className="h-8 gap-1.5 px-2 sm:px-3"
+      size="sm"
+      variant="default"
+    >
+      <a href={VERCEL_DEPLOY_URL} rel="noopener noreferrer" target="_blank">
+        <svg
+          aria-label="Vercel logomark"
+          className="size-3.5"
+          fill="currentColor"
+          viewBox="0 0 76 76"
+        >
+          <title>Vercel logomark</title>
+          <path d="m38 0 38 66H0z" />
+        </svg>
+        <span className="text-sm">Deploy Your Own</span>
+      </a>
+    </Button>
+  );
+}

components/github-stars-button.tsx

@@ -12,10 +12,6 @@ type GitHubStarsButtonProps = {
 };
 
 export function GitHubStarsButton({ initialStars }: GitHubStarsButtonProps) {
-  if (!initialStars) {
-    return null;
-  }
-
   return (
     <Button
       asChild
@@ -29,8 +25,12 @@ export function GitHubStarsButton({ initialStars }: GitHubStarsButtonProps) {
         rel="noopener noreferrer"
         target="_blank"
       >
-        <GitHubIcon className="size-3.5" />
-        <span className="text-sm">{formatAbbreviatedNumber(initialStars)}</span>
+        <GitHubIcon className="size-4.5" />
+        {initialStars && (
+          <span className="text-sm">
+            {formatAbbreviatedNumber(initialStars)}
+          </span>
+        )}
       </a>
     </Button>
   );

components/workflow/workflow-runs.tsx

@@ -458,13 +458,13 @@ export function WorkflowRuns({
   const getStatusIcon = (status: string) => {
     switch (status) {
       case "success":
-        return <Check className="h-3 w-3 text-primary" />;
+        return <Check className="h-3 w-3 text-white" />;
       case "error":
-        return <X className="h-3 w-3 text-primary" />;
+        return <X className="h-3 w-3 text-white" />;
       case "running":
-        return <Loader2 className="h-3 w-3 animate-spin text-primary" />;
+        return <Loader2 className="h-3 w-3 animate-spin text-white" />;
       default:
-        return <Clock className="h-3 w-3 text-primary" />;
+        return <Clock className="h-3 w-3 text-white" />;
     }
   };
 

components/workflow/workflow-toolbar.tsx

@@ -79,6 +79,7 @@ import {
   type WorkflowNode,
 } from "@/lib/workflow-store";
 import { Panel } from "../ai-elements/panel";
+import { DeployButton } from "../deploy-button";
 import { GitHubStarsButton } from "../github-stars-button";
 import { WorkflowIcon } from "../ui/workflow-icon";
 import { UserMenu } from "../workflows/user-menu";
@@ -1181,6 +1182,7 @@ export const WorkflowToolbar = ({ workflowId }: WorkflowToolbarProps) => {
           workflowId={workflowId}
         />
         <GitHubStarsButton />
+        <DeployButton />
         <UserMenu />
       </Panel>