From b78547a9924ab4b128b73edb8679d2a9c8039f0d Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 13 Mar 2025 10:48:01 +0800
Subject: [PATCH] feat(run-code): add tooltip to button for better UX

---
 src/components/run-code.tsx | 44 ++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/run-code.tsx b/src/components/run-code.tsx
index 6a3a860..afbdd47 100644
--- a/src/components/run-code.tsx
+++ b/src/components/run-code.tsx
@@ -6,6 +6,7 @@ import { judge } from "@/app/actions/judge";
 import { Button } from "@/components/ui/button";
 import { LoaderCircleIcon, PlayIcon } from "lucide-react";
 import { useCodeEditorStore } from "@/store/useCodeEditorStore";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 
 interface RunCodeProps {
   className?: string;
@@ -36,23 +37,30 @@ export default function RunCode({
   };
 
   return (
-    <Button
-      {...props}
-      variant="secondary"
-      className={cn("h-8 px-3 py-1.5", className)}
-      onClick={handleJudge}
-      disabled={isLoading}
-    >
-      {isLoading ? (
-        <LoaderCircleIcon
-          className="-ms-1 opacity-60 animate-spin"
-          size={16}
-          aria-hidden="true"
-        />
-      ) : (
-        <PlayIcon className="-ms-1 opacity-60" size={16} aria-hidden="true" />
-      )}
-      {isLoading ? "Running..." : "Run"}
-    </Button>
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            {...props}
+            variant="secondary"
+            className={cn("h-8 px-3 py-1.5", className)}
+            onClick={handleJudge}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <LoaderCircleIcon
+                className="-ms-1 opacity-60 animate-spin"
+                size={16}
+                aria-hidden="true"
+              />
+            ) : (
+              <PlayIcon className="-ms-1 opacity-60" size={16} aria-hidden="true" />
+            )}
+            {isLoading ? "Running..." : "Run"}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent className="px-2 py-1 text-xs">Run Code</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }