dokploy/apps/dokploy/components/shared/status-tooltip.tsx at 3ee2c07f04055d23c5148803a11e905ce42d4349 · Dokploy/dokploy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

interface Props {
	status:
		| "queued"
		| "running"
		| "error"
		| "done"
		| "idle"
		| "cancelled"
		| undefined
		| null;
	className?: string;
}

export const StatusTooltip = ({ status, className }: Props) => {
	return (
		<TooltipProvider delayDuration={0}>
			<Tooltip>
				<TooltipTrigger>
					{status === "idle" && (
						<div
							className={cn(
								"size-3.5 rounded-full bg-muted-foreground dark:bg-card",
								className,
							)}
						/>
					)}
					{status === "error" && (
						<div
							className={cn("size-3.5 rounded-full bg-destructive", className)}
						/>
					)}
					{status === "done" && (
						<div
							className={cn("size-3.5 rounded-full bg-green-500", className)}
						/>
					)}
					{status === "cancelled" && (
						<div
							className={cn(
								"size-3.5 rounded-full bg-muted-foreground",
								className,
							)}
						/>
					)}
					{status === "running" && (
						<div
							className={cn("size-3.5 rounded-full bg-yellow-500", className)}
						/>
					)}
					{status === "queued" && (
						<div
							className={cn("size-3.5 rounded-full bg-blue-500", className)}
						/>
					)}
				</TooltipTrigger>
				<TooltipContent align="center">
					<span>
						{status === "idle" && "Idle"}
						{status === "error" && "Error"}
						{status === "done" && "Done"}
						{status === "running" && "Running"}
						{status === "cancelled" && "Cancelled"}
						{status === "queued" && "Queued"}
					</span>
				</TooltipContent>
			</Tooltip>
		</TooltipProvider>
	);
};