feat: offline badge

src/components/Header.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
 import { LanguageSwitcher } from "./LanguageSwitcher"
+import { Loader } from "./loading/Loader"
 import { Button } from "./ui/button"
 
 function Header() {
@@ -80,9 +81,13 @@ function Header() {
             size="sm"
             className={cn("hover:bg-white dark:hover:bg-black cursor-default rounded-full flex items-center px-[9px] bg-white dark:bg-black")}
           >
-            {connected ? onlineCount : "..."}
-            <p className="text-muted-foreground">{t("online")}</p>
-            <span className="h-2 w-2 rounded-full bg-green-500"></span>
+            {connected ? onlineCount : <Loader visible={true} />}
+            <p className="text-muted-foreground">{connected ? t("online") : t("offline")}</p>
+            <span
+              className={cn("h-2 w-2 rounded-full bg-green-500", {
+                "bg-red-500": !connected,
+              })}
+            ></span>
           </Button>
         </section>
       </section>

src/locales/en/translation.json

@@ -4,6 +4,7 @@
   "dashboard": "Dashboard",
   "login": "Login",
   "online": "Online",
+  "offline": "Offline",
   "whereTheTimeIs": "Where the time is",
   "info": {
     "websocketConnecting": "WebSocket connecting",

src/locales/zh-CN/translation.json

@@ -4,6 +4,7 @@
   "dashboard": "管理后台",
   "login": "登录",
   "online": "在线",
+  "offline": "离线",
   "whereTheTimeIs": "当前时间",
   "info": {
     "websocketConnecting": "WebSocket 连接中",

src/locales/zh-TW/translation.json

@@ -4,6 +4,7 @@
   "dashboard": "管理後台",
   "login": "登錄",
   "online": "在線",
+  "offline": "離線",
   "whereTheTimeIs": "目前時間",
   "info": {
     "websocketConnecting": "WebSocket 連接中",