Benson Wong
7acbaf4712
* show connection status as icon in UI title * make connection status event driven
27 lines
699 B
TypeScript
27 lines
699 B
TypeScript
import { useAPI } from "../contexts/APIProvider";
|
|
import { useMemo } from "react";
|
|
|
|
const ConnectionStatusIcon = () => {
|
|
const { connectionStatus } = useAPI();
|
|
|
|
const eventStatusColor = useMemo(() => {
|
|
switch (connectionStatus) {
|
|
case "connected":
|
|
return "bg-green-500";
|
|
case "connecting":
|
|
return "bg-yellow-500";
|
|
case "disconnected":
|
|
default:
|
|
return "bg-red-500";
|
|
}
|
|
}, [connectionStatus]);
|
|
|
|
return (
|
|
<div className="flex items-center" title={`event stream: ${connectionStatus}`}>
|
|
<span className={`inline-block w-3 h-3 rounded-full ${eventStatusColor} mr-2`}></span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConnectionStatusIcon;
|