feat: add motion-number

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -7,6 +7,7 @@ import useSWR from "swr";
 import { formatBytes, nezhaFetcher } from "@/lib/utils";
 import { Loader } from "@/components/loading/Loader";
 import { ServerApi } from "@/app/types/nezha-api";
+import MotionNumber from "motion-number";
 
 export default function ServerOverviewClient() {
   const { data } = useSWR<ServerApi>("/api/server", nezhaFetcher);
@@ -24,7 +25,13 @@ export default function ServerOverviewClient() {
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
               </span>
               {data ? (
-                <p className="text-lg font-semibold">{data?.result.length}</p>
+                <div className="text-lg font-semibold">
+                  <MotionNumber
+                    value={data?.result.length}
+                    format={{ notation: "compact" }}
+                    locales="en-US"
+                  />
+                </div>
               ) : (
                 <div className="flex h-7 items-center">
                   <Loader visible={true} />
@@ -44,7 +51,13 @@ export default function ServerOverviewClient() {
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
               </span>
               {data ? (
-                <p className="text-lg font-semibold">{data?.live_servers}</p>
+                <div className="text-lg font-semibold">
+                  <MotionNumber
+                    value={data?.live_servers}
+                    format={{ notation: "compact" }}
+                    locales="en-US"
+                  />
+                </div>
               ) : (
                 <div className="flex h-7 items-center">
                   <Loader visible={true} />
@@ -64,7 +77,13 @@ export default function ServerOverviewClient() {
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
               </span>
               {data ? (
-                <p className="text-lg font-semibold">{data?.offline_servers}</p>
+                <div className="text-lg font-semibold">
+                  <MotionNumber
+                    value={data?.offline_servers}
+                    format={{ notation: "compact" }}
+                    locales="en-US"
+                  />
+                </div>
               ) : (
                 <div className="flex h-7 items-center">
                   <Loader visible={true} />

components/ServerCard.tsx

@@ -9,6 +9,7 @@ import {
 import { cn, formatNezhaInfo } from "@/lib/utils";
 import ServerCardPopover from "./ServerCardPopover";
 import getUnicodeFlagIcon from "country-flag-icons/unicode";
+import MotionNumber from "motion-number";
 
 export default function ServerCard({
   serverInfo,
@@ -56,26 +57,61 @@ export default function ServerCard({
       <section className={"grid grid-cols-5 items-center gap-3"}>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">CPU</p>
-          <div className="text-xs font-semibold">{cpu.toFixed(2)}%</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={cpu.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            %
+          </div>
           <ServerUsageBar value={cpu} />
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">Mem</p>
-          <div className="text-xs font-semibold">{mem.toFixed(2)}%</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={mem.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            %
+          </div>
           <ServerUsageBar value={mem} />
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">STG</p>
-          <div className="text-xs font-semibold">{stg.toFixed(2)}%</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={stg.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            %
+          </div>
           <ServerUsageBar value={stg} />
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">Upload</p>
-          <div className="text-xs font-semibold">{up.toFixed(2)}Mb/s</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={up.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            Mb/s
+          </div>
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">Download</p>
-          <div className="text-xs font-semibold">{down.toFixed(2)}Mb/s</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={down.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            Mb/s
+          </div>
         </div>
       </section>
     </Card>

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3020",
+    "dev": "next dev -p 3020 --turbo",
     "start": "node .next/standalone/server.js",
     "lint": "next lint",
     "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/"
@@ -26,6 +26,7 @@
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "lucide-react": "^0.414.0",
     "luxon": "^3.4.4",
+    "motion-number": "^0.1.6",
     "next": "^14.2.3",
     "next-themes": "^0.3.0",
     "react": "^18.2.0",