feat: server detail region

app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx

@@ -3,6 +3,7 @@
 import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
 import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import { BackIcon } from "@/components/Icon";
+import ServerFlag from "@/components/ServerFlag";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import getEnv from "@/lib/env-entry";
@@ -60,7 +61,7 @@ export default function ServerDetailClient({
               <p className="text-xs text-muted-foreground">{t("status")}</p>
               <Badge
                 className={cn(
-                  "text-[10px] rounded-[6px] w-fit px-1 py-0 dark:text-white",
+                  "text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
                   {
                     " bg-green-800": data?.online_status,
                     " bg-red-600": !data?.online_status,
@@ -115,6 +116,22 @@ export default function ServerDetailClient({
             </section>
           </CardContent>
         </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Region")}</p>
+              <section className="flex items-start gap-1">
+                <div className="text-xs text-start">
+                  {data?.host.CountryCode.toUpperCase()}
+                </div>
+                <ServerFlag
+                  className="text-[11px] -mt-[1px]"
+                  country_code={data?.host.CountryCode}
+                />
+              </section>
+            </section>
+          </CardContent>
+        </Card>
       </section>
       <section className="flex flex-wrap gap-2 mt-1">
         <Card className="rounded-[10px] bg-transparent border-none shadow-none">

components/ServerFlag.tsx

@@ -1,8 +1,15 @@
 import getEnv from "@/lib/env-entry";
+import { cn } from "@/lib/utils";
 import getUnicodeFlagIcon from "country-flag-icons/unicode";
 import { useEffect, useState } from "react";
 
-export default function ServerFlag({ country_code }: { country_code: string }) {
+export default function ServerFlag({
+  country_code,
+  className,
+}: {
+  country_code: string;
+  className?: string;
+}) {
   const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
 
   const useSvgFlag = getEnv("NEXT_PUBLIC_ForceUseSvgFlag") === "true";
@@ -38,9 +45,9 @@ export default function ServerFlag({ country_code }: { country_code: string }) {
   }
 
   return (
-    <span className="text-[12px] text-muted-foreground">
+    <span className={cn("text-[12px] text-muted-foreground", className)}>
       {useSvgFlag || !supportsEmojiFlags ? (
-        <span className={`fi fi-${country_code}`}></span>
+        <span className={`fi fi-${country_code}`} />
       ) : (
         getUnicodeFlagIcon(country_code)
       )}

messages/en.json

@@ -58,6 +58,7 @@
     "Arch": "Arch",
     "Mem": "Mem",
     "Disk": "Disk",
+    "Region": "Region",
     "System": "System",
     "CPU": "CPU"
   },

messages/ja.json

@@ -58,6 +58,7 @@
     "Arch": "アーキテクチャ",
     "Mem": "メモリ",
     "Disk": "ディスク",
+    "Region": "地域",
     "System": "システム",
     "CPU": "CPU"
   },

messages/zh-t.json

@@ -58,6 +58,7 @@
     "Arch": "架構",
     "Mem": "記憶體",
     "Disk": "磁碟",
+    "Region": "地區",
     "System": "系統",
     "CPU": "CPU"
   },

messages/zh.json

@@ -58,6 +58,7 @@
     "Arch": "架构",
     "Mem": "内存",
     "Disk": "磁盘",
+    "Region": "地区",
     "System": "系统",
     "CPU": "CPU"
   },