1 files changed, 36 insertions, 0 deletions
diff --git a/FrontEnd/src/pages/timeline/ConnectionStatusBadge.tsx b/FrontEnd/src/pages/timeline/ConnectionStatusBadge.tsx
new file mode 100644
index 00000000..63990878
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/ConnectionStatusBadge.tsx
@@ -0,0 +1,36 @@
+import classNames from "classnames";
+import { HubConnectionState } from "@microsoft/signalr";
+
+import { useC }from '~/src/components/common';
+
+import "./ConnectionStatusBadge.css";
+
+interface ConnectionStatusBadgeProps {
+  status: HubConnectionState;
+  className?: string;
+}
+
+const classNameMap: Record<HubConnectionState, string> = {
+  Connected: "success",
+  Connecting: "warning",
+  Disconnected: "danger",
+  Disconnecting: "warning",
+  Reconnecting: "warning",
+};
+
+export default function ConnectionStatusBadge({status, className}: ConnectionStatusBadgeProps) {
+  const c = useC();
+
+  return (
+    <div
+      className={classNames(
+        "connection-status-badge",
+        classNameMap[status],
+        className
+      )}
+    >
+      {c(`connectionState.${status}`)}
+    </div>
+  );
+};
+