| 227 | |
| 228 | // Get connection icon based on network mode and connection status |
| 229 | const getConnectionIcon = () => { |
| 230 | // If not connected to robot, show connection status icons |
| 231 | if (connectionStatus === 'connecting') { |
| 232 | return <Loader2 className="h-5 w-5 text-purple-600 dark:text-purple-400 animate-spin" />; |
| 233 | } |
| 234 | |
| 235 | if (connectionStatus !== 'connected') { |
| 236 | return <WifiOff className="h-5 w-5 text-red-500" />; |
| 237 | } |
| 238 | |
| 239 | // When connected, show network mode icon |
| 240 | switch (networkModeStatus.mode) { |
| 241 | case 'wifi': |
| 242 | return ( |
| 243 | <div className="flex items-center space-x-1"> |
| 244 | <Wifi className="h-5 w-5 text-green-600 dark:text-green-500" /> |
| 245 | {networkModeStatus.ssid && ( |
| 246 | <span className="text-xs text-gray-600 dark:text-gray-400"> |
| 247 | {networkModeStatus.ssid} |
| 248 | </span> |
| 249 | )} |
| 250 | </div> |
| 251 | ); |
| 252 | case '4g': |
| 253 | return ( |
| 254 | <div className="flex items-center space-x-1"> |
| 255 | <Smartphone className="h-5 w-5 text-blue-600 dark:text-blue-500" /> |
| 256 | <span className="text-xs text-gray-600 dark:text-gray-400">4G</span> |
| 257 | </div> |
| 258 | ); |
| 259 | case 'hotspot': |
| 260 | return ( |
| 261 | <div className="flex items-center space-x-1"> |
| 262 | <Radio className="h-5 w-5 text-orange-600 dark:text-orange-500" /> |
| 263 | {networkModeStatus.ssid && ( |
| 264 | <span className="text-xs text-gray-600 dark:text-gray-400"> |
| 265 | {networkModeStatus.ssid} |
| 266 | </span> |
| 267 | )} |
| 268 | </div> |
| 269 | ); |
| 270 | case 'offline': |
| 271 | default: |
| 272 | return <Globe className="h-5 w-5 text-gray-500 dark:text-gray-400" />; |
| 273 | } |
| 274 | }; |
| 275 | |
| 276 | // Get connection status text with robot name |
| 277 | const getConnectionText = () => { |