From 010cfce1c4a2e1f420ce67499240ad5af36c703a Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Thu, 6 Feb 2025 00:10:43 +0800
Subject: [PATCH] refactor: improve server details page with type safety and
 dynamic tab rendering

---
 app/(main)/server/[id]/page.tsx | 52 ++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/app/(main)/server/[id]/page.tsx b/app/(main)/server/[id]/page.tsx
index 838ba40..4d47b8f 100644
--- a/app/(main)/server/[id]/page.tsx
+++ b/app/(main)/server/[id]/page.tsx
@@ -9,27 +9,45 @@ import { Separator } from "@/components/ui/separator"
 import getEnv from "@/lib/env-entry"
 import { use, useState } from "react"
 
-export default function Page(props: { params: Promise<{ id: string }> }) {
-  const params = use(props.params)
-  const tabs = ["Detail", "Network"]
-  const [currentTab, setCurrentTab] = useState(tabs[0])
+type PageProps = {
+  params: Promise<{ id: string }>
+}
+
+type TabType = "Detail" | "Network"
+
+export default function Page({ params }: PageProps) {
+  const { id } = use(params)
+  const serverId = Number(id)
+  const tabs: TabType[] = ["Detail", "Network"]
+  const [currentTab, setCurrentTab] = useState<TabType>(tabs[0])
+
+  const tabContent = {
+    Detail: <ServerDetailChartClient server_id={serverId} show={currentTab === "Detail"} />,
+    Network: (
+      <>
+        {getEnv("NEXT_PUBLIC_ShowIpInfo") && <ServerIPInfo server_id={serverId} />}
+        <NetworkChartClient server_id={serverId} show={currentTab === "Network"} />
+      </>
+    ),
+  }
+
   return (
-    <div className="mx-auto grid w-full max-w-5xl gap-2">
-      <ServerDetailClient server_id={Number(params.id)} />
-      <section className="flex items-center my-2 w-full">
+    <main className="mx-auto grid w-full max-w-5xl gap-2">
+      <ServerDetailClient server_id={serverId} />
+
+      <nav className="flex items-center my-2 w-full">
         <Separator className="flex-1" />
         <div className="flex justify-center w-full max-w-[200px]">
-          <TabSwitch tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
+          <TabSwitch
+            tabs={tabs}
+            currentTab={currentTab}
+            setCurrentTab={(tab: string) => setCurrentTab(tab as TabType)}
+          />
         </div>
         <Separator className="flex-1" />
-      </section>
-      <div style={{ display: currentTab === tabs[0] ? "block" : "none" }}>
-        <ServerDetailChartClient server_id={Number(params.id)} show={currentTab === tabs[0]} />
-      </div>
-      <div style={{ display: currentTab === tabs[1] ? "block" : "none" }}>
-        {getEnv("NEXT_PUBLIC_ShowIpInfo") && <ServerIPInfo server_id={Number(params.id)} />}
-        <NetworkChartClient server_id={Number(params.id)} show={currentTab === tabs[1]} />
-      </div>
-    </div>
+      </nav>
+
+      {tabContent[currentTab]}
+    </main>
   )
 }