Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cfngc4594 2025-03-13 10:48:01 +08:00
parent 574a98e58e
commit b78547a992
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/run-code.tsx
View File

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