Status indicator

1import React from "react";
2import { cn } from "@/lib/utils";
3 
4interface StatusIndicatorProps {
5  state: "active" | "down" | "fixing" | "idle";
6  color?: string;
7  label?: string;
8  className?: string;
9  size?: "sm" | "md" | "lg";
10  labelClassName?: string;
11}
12 
13const getStateColors = (state: StatusIndicatorProps["state"]) => {
14  switch (state) {
15    case "active":
16      return { dot: "bg-green-500", ping: "bg-green-300" };
17    case "down":
18      return { dot: "bg-red-500", ping: "bg-red-300" };
19    case "fixing":
20      return { dot: "bg-yellow-500", ping: "bg-yellow-300" };
21    case "idle":
22    default:
23      return { dot: "bg-slate-700", ping: "bg-slate-400" };
24  }
25};
26 
27const getSizeClasses = (size: StatusIndicatorProps["size"]) => {
28  switch (size) {
29    case "sm":
30      return { dot: "h-2 w-2", ping: "h-2 w-2" };
31    case "lg":
32      return { dot: "h-4 w-4", ping: "h-4 w-4" };
33    case "md":
34    default:
35      return { dot: "h-3 w-3", ping: "h-3 w-3" };
36  }
37};
38 
39const StatusIndicator: React.FC<StatusIndicatorProps> = ({
40  state = "idle",
41  color,
42  label,
43  className,
44  size = "md",
45  labelClassName
46}) => {
47  const shouldAnimate =
48    state === "active" || state === "fixing" || state === "down";
49  const colors = getStateColors(state);
50  const sizeClasses = getSizeClasses(size);
51 
52  return (
53    <div className={cn("flex items-center gap-2", className)}>
54      <div className="relative flex items-center">
55        {shouldAnimate && (
56          <span
57            className={cn(
58              "absolute inline-flex rounded-full opacity-75 animate-ping",
59              sizeClasses.ping,
60              colors.ping
61            )}
62          />
63        )}
64        <span
65          className={cn(
66            "relative inline-flex rounded-full",
67            sizeClasses.dot,
68            colors.dot
69          )}
70        />
71      </div>
72      {label && (
73        <p
74          className={cn(
75            "text-sm text-slate-700 dark:text-slate-300",
76            labelClassName
77          )}
78        >
79          {label}
80        </p>
81      )}
82    </div>
83  );
84};
85 
86export default StatusIndicator;