From 3cf489725833d691baaadedc59d93ec33d0b9cf3 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sat, 21 Dec 2024 14:31:53 +0800
Subject: [PATCH] feat: offline badge

---
 src/components/Header.tsx          | 11 ++++++++---
 src/locales/en/translation.json    |  1 +
 src/locales/zh-CN/translation.json |  1 +
 src/locales/zh-TW/translation.json |  1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3bf2f8b..94c6bb6 100644
--- a/src/components/Header.tsx
+++ b/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>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 7a5c8ef..f6a5720 100644
--- a/src/locales/en/translation.json
+++ b/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",
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 64b0dee..a07ba8b 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -4,6 +4,7 @@
   "dashboard": "管理后台",
   "login": "登录",
   "online": "在线",
+  "offline": "离线",
   "whereTheTimeIs": "当前时间",
   "info": {
     "websocketConnecting": "WebSocket 连接中",
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index b163f7d..4398f9c 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -4,6 +4,7 @@
   "dashboard": "管理後台",
   "login": "登錄",
   "online": "在線",
+  "offline": "離線",
   "whereTheTimeIs": "目前時間",
   "info": {
     "websocketConnecting": "WebSocket 連接中",