| 19 | } |
| 20 | |
| 21 | export const StatusTooltip = ({ status, className }: Props) => { |
| 22 | return ( |
| 23 | <TooltipProvider delayDuration={0}> |
| 24 | <Tooltip> |
| 25 | <TooltipTrigger> |
| 26 | {status === "idle" && ( |
| 27 | <div |
| 28 | className={cn( |
| 29 | "size-3.5 rounded-full bg-muted-foreground dark:bg-card", |
| 30 | className, |
| 31 | )} |
| 32 | /> |
| 33 | )} |
| 34 | {status === "error" && ( |
| 35 | <div |
| 36 | className={cn("size-3.5 rounded-full bg-destructive", className)} |
| 37 | /> |
| 38 | )} |
| 39 | {status === "done" && ( |
| 40 | <div |
| 41 | className={cn("size-3.5 rounded-full bg-green-500", className)} |
| 42 | /> |
| 43 | )} |
| 44 | {status === "cancelled" && ( |
| 45 | <div |
| 46 | className={cn( |
| 47 | "size-3.5 rounded-full bg-muted-foreground", |
| 48 | className, |
| 49 | )} |
| 50 | /> |
| 51 | )} |
| 52 | {status === "running" && ( |
| 53 | <div |
| 54 | className={cn("size-3.5 rounded-full bg-yellow-500", className)} |
| 55 | /> |
| 56 | )} |
| 57 | </TooltipTrigger> |
| 58 | <TooltipContent align="center"> |
| 59 | <span> |
| 60 | {status === "idle" && "Idle"} |
| 61 | {status === "error" && "Error"} |
| 62 | {status === "done" && "Done"} |
| 63 | {status === "running" && "Running"} |
| 64 | {status === "cancelled" && "Cancelled"} |
| 65 | </span> |
| 66 | </TooltipContent> |
| 67 | </Tooltip> |
| 68 | </TooltipProvider> |
| 69 | ); |
| 70 | }; |