Merge pull request #11 from hamster1963/nation-flag

feat: add flag

.env.example

@@ -1,3 +1,5 @@
 NezhaBaseUrl=http://0.0.0.0:8008
 NezhaAuth=5hAY3QX6Nl9B3UOQgB26KdsdS1dsdUdM
 NEXT_PUBLIC_NezhaFetchInterval=5000
+NEXT_PUBLIC_ShowFlag=true
+NEXT_PUBLIC_DisableCartoon=true

README.md

@@ -11,11 +11,14 @@
 
 #### 环境变量
 
-变量名 | 含义 | 示例
+| 变量名                         | 含义                 | 示例                             |
---- | --- | --- 
+| ------------------------------ | -------------------- | -------------------------------- |
-NezhaBaseUrl | nezha 面板地址 | http://120.x.x.x:8008
+| NezhaBaseUrl                   | nezha 面板地址       | http://120.x.x.x:8008            |
-NezhaAuth | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi
+| NezhaAuth                      | nezha 面板 API Token | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi |
-NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒）|  **默认**：2000
+| NEXT_PUBLIC_NezhaFetchInterval | 获取数据间隔（毫秒） | **默认**：2000                   |
+| NEXT_PUBLIC_ShowFlag           | 是否显示旗帜         | **默认**：false                  |
+| NEXT_PUBLIC_DisableCartoon     | 是否禁用卡通人物     | **默认**：false                  |
+
 <br>
 
 ![screen-shot-one](/.github/shotOne.png)

app/(main)/header.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { Separator } from "@/components/ui/separator";
 import { DateTime } from "luxon";
+import { ModeToggle } from "@/components/ThemeSwitcher";
 
 function Header() {
   return (
@@ -20,7 +21,7 @@ function Header() {
               className="relative !m-0 h-6 w-6 border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
             />
           </div>
-          HomeDash
+          NezhaDash
           <Separator
             orientation="vertical"
             className="mx-2 hidden h-4 w-[1px] md:block"
@@ -29,7 +30,7 @@ function Header() {
             Simple and beautiful dashboard
           </p>
         </section>
-        {/* <LiveTag /> */}
+        <ModeToggle />
       </section>
       <Overview />
     </div>

app/layout.tsx

@@ -14,11 +14,11 @@ const fontSans = FontSans({
 
 export const metadata: Metadata = {
   manifest: "/manifest.json",
-  title: "HomeDash",
+  title: "NezhaDash",
   description: "A dashboard for nezha",
   appleWebApp: {
     capable: true,
-    title: "HomeDash",
+    title: "NezhaDash",
     statusBarStyle: "black-translucent",
   },
 };

components/ServerCard.tsx

@@ -6,17 +6,20 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { formatNezhaInfo } from "@/lib/utils";
+import { cn, formatNezhaInfo } from "@/lib/utils";
 import ServerCardPopover from "./ServerCardPopover";
+import getUnicodeFlagIcon from "country-flag-icons/unicode";
 
 export default function ServerCard({
   serverInfo,
 }: {
   serverInfo: NezhaAPISafe;
 }) {
-  const { name, online, cpu, up, down, mem, stg, ...props } =
+  const { name, country_code, online, cpu, up, down, mem, stg, ...props } =
     formatNezhaInfo(serverInfo);
 
+  const showFlag = process.env.NEXT_PUBLIC_ShowFlag === "true";
+
   return online ? (
     <Card
       className={
@@ -26,8 +29,24 @@ export default function ServerCard({
       <Popover>
         <PopoverTrigger asChild>
           <section className={"flex items-center justify-start gap-2 lg:w-28"}>
+            {showFlag ? (
+              country_code ? (
+                <span className="text-[12px] text-muted-foreground">
+                  {getUnicodeFlagIcon(country_code)}
+                </span>
+              ) : (
+                <span className="text-[12px] text-muted-foreground">🏴‍☠️</span>
+              )
+            ) : null}
             <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
-            <p className="break-all text-sm font-bold tracking-tight">{name}</p>
+            <p
+              className={cn(
+                "break-all font-bold tracking-tight",
+                showFlag ? "text-xs" : "text-sm",
+              )}
+            >
+              {name}
+            </p>
           </section>
         </PopoverTrigger>
         <PopoverContent side="top">
@@ -69,8 +88,24 @@ export default function ServerCard({
       <Popover>
         <PopoverTrigger asChild>
           <section className={"flex items-center justify-start gap-2 lg:w-28"}>
+            {showFlag ? (
+              country_code ? (
+                <span className="text-[12px] text-muted-foreground">
+                  {getUnicodeFlagIcon(country_code)}
+                </span>
+              ) : (
+                <span className="text-[12px] text-muted-foreground">🏴‍☠️</span>
+              )
+            ) : null}
             <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
-            <p className="text-sm font-bold tracking-tight">{name}</p>
+            <p
+              className={cn(
+                "break-all font-bold tracking-tight",
+                showFlag ? "text-xs" : "text-sm",
+              )}
+            >
+              {name}
+            </p>
           </section>
         </PopoverTrigger>
         <PopoverContent className="w-fit p-2" side="top">

components/ThemeSwitcher.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="rounded-full px-[9px]">
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

lib/utils.ts

@@ -15,6 +15,7 @@ export function formatNezhaInfo(serverInfo: NezhaAPISafe) {
     online: serverInfo.online_status,
     mem: (serverInfo.status.MemUsed / serverInfo.host.MemTotal) * 100,
     stg: (serverInfo.status.DiskUsed / serverInfo.host.DiskTotal) * 100,
+    country_code: serverInfo.host.CountryCode,
   };
 }
 

package.json

@@ -22,6 +22,7 @@
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "country-flag-icons": "^1.5.13",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "lucide-react": "^0.414.0",
     "luxon": "^3.4.4",