feat(run-code): add tooltip to button for better UX

This commit is contained in:
cfngc4594 2025-03-13 10:48:01 +08:00
parent 574a98e58e
commit b78547a992

View File

@ -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>
);
}