All files / src/components/icons WifiSignal.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
interface WifiSignalProps {
  signal: number | null | undefined;  // dBm value
  className?: string;
}
 
/**
 * WiFi signal icon with 4 bars that fill based on signal strength.
 * - 4 bars: >= -50 dBm (excellent)
 * - 3 bars: >= -60 dBm (good)
 * - 2 bars: >= -70 dBm (fair)
 * - 1 bar:  < -70 dBm (weak)
 * - 0 bars: no signal data
 */
export function WifiSignal({ signal, className = "w-4 h-4" }: WifiSignalProps) {
  let bars = 0;
  if (signal != null) {
    if (signal >= -50) bars = 4;
    else if (signal >= -60) bars = 3;
    else if (signal >= -70) bars = 2;
    else bars = 1;
  }
 
  const activeColor = "#00ae42";  // bambu-green
  const inactiveColor = "#4a4a4a";  // dark gray
 
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      {/* Dot at bottom */}
      <circle
        cx="12"
        cy="20"
        r="1"
        fill={bars >= 1 ? activeColor : inactiveColor}
        stroke={bars >= 1 ? activeColor : inactiveColor}
      />
      {/* First arc (smallest) */}
      <path
        d="M8.5 16.5a5 5 0 0 1 7 0"
        stroke={bars >= 2 ? activeColor : inactiveColor}
        fill="none"
      />
      {/* Second arc */}
      <path
        d="M5 13a10 10 0 0 1 14 0"
        stroke={bars >= 3 ? activeColor : inactiveColor}
        fill="none"
      />
      {/* Third arc (largest) */}
      <path
        d="M1.5 9.5a15 15 0 0 1 21 0"
        stroke={bars >= 4 ? activeColor : inactiveColor}
        fill="none"
      />
    </svg>
  );
}