tracker-tracker/src/components/ui/PulseDot.tsx at patch-2 · bitglows/tracker-tracker · 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
78
79
80
81
82
83
84
85
86
87
88
89
// src/components/ui/PulseDot.tsx
import { cva } from "class-variance-authority"
import clsx from "clsx"

type PulseDotStatus =
  | "healthy"
  | "warning"
  | "critical"
  | "error"
  | "paused"
  | "paused-user"
  | "offline"
type PulseDotSize = "sm" | "md"

interface PulseDotProps {
  status?: PulseDotStatus
  size?: PulseDotSize
  color?: string
  className?: string
  "aria-label"?: string
}

const statusLabels: Record<PulseDotStatus, string> = {
  healthy: "Healthy",
  warning: "Warning",
  critical: "Critical",
  paused: "Paused",
  "paused-user": "Paused by user",
  error: "Error",
  offline: "Offline",
}

const shouldPulse: Record<PulseDotStatus, boolean> = {
  healthy: true,
  warning: true,
  critical: true,
  paused: false,
  "paused-user": false,
  error: false,
  offline: false,
}

const pulseDot = cva("inline-block rounded-full shrink-0", {
  variants: {
    status: {
      healthy: "text-accent bg-accent",
      warning: "text-warn bg-warn",
      critical: "text-danger bg-danger",
      paused: "text-danger bg-danger",
      "paused-user": "text-warn bg-warn",
      error: "text-secondary bg-secondary",
      offline: "text-muted bg-muted",
    },
    size: {
      sm: "w-2 h-2",
      md: "w-3 h-3",
    },
  },
  defaultVariants: {
    status: "healthy",
    size: "md",
  },
})

function PulseDot({
  status = "healthy",
  size = "md",
  color,
  className,
  "aria-label": ariaLabel,
}: PulseDotProps) {
  const pulse = shouldPulse[status]
  const useCustomColor = color && status === "healthy"

  return (
    <output
      aria-label={ariaLabel ?? statusLabels[status]}
      className={clsx(
        pulseDot({ status: useCustomColor ? undefined : status, size }),
        pulse ? "animate-pulse-glow" : "opacity-50",
        className
      )}
      style={useCustomColor ? { backgroundColor: color, color: color } : undefined}
    />
  )
}

export type { PulseDotProps, PulseDotSize, PulseDotStatus }
export { PulseDot }