feat: add detail page

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

@@ -28,9 +28,9 @@ import { useLocale } from "next-intl";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import * as React from "react";
+import { useCallback, useMemo } from "react";
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import useSWR from "swr";
-import { useMemo, useCallback } from 'react';
 
 interface ResultItem {
   created_at: number;
@@ -64,7 +64,6 @@ export function NetworkChartClient({ server_id }: { server_id: number }) {
 
   if (!data) return <NetworkChartLoading />;
 
-
   const transformedData = transformData(data);
 
   const formattedData = formatData(data);
@@ -109,16 +108,23 @@ export const NetworkChart = React.memo(function NetworkChart({
 
   const [activeChart, setActiveChart] = React.useState(defaultChart);
 
-  const handleButtonClick = useCallback((chart: string) => {
+  const handleButtonClick = useCallback(
-    setActiveChart(prev => prev === chart ? defaultChart : chart);
+    (chart: string) => {
-  }, [defaultChart]);
+      setActiveChart((prev) => (prev === chart ? defaultChart : chart));
+    },
+    [defaultChart],
+  );
 
-  const getColorByIndex = useCallback((chart: string) => {
+  const getColorByIndex = useCallback(
+    (chart: string) => {
       const index = chartDataKey.indexOf(chart);
       return `hsl(var(--chart-${(index % 10) + 1}))`;
-  }, [chartDataKey]);
+    },
+    [chartDataKey],
+  );
 
-  const chartButtons = useMemo(() => (
+  const chartButtons = useMemo(
+    () =>
       chartDataKey.map((key) => (
         <button
           key={key}
@@ -133,8 +139,9 @@ export const NetworkChart = React.memo(function NetworkChart({
             {chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
           </span>
         </button>
-    ))
+      )),
-  ), [chartDataKey, activeChart, chartData, handleButtonClick]);
+    [chartDataKey, activeChart, chartData, handleButtonClick],
+  );
 
   const chartLines = useMemo(() => {
     if (activeChart !== defaultChart) {
@@ -180,9 +187,7 @@ export const NetworkChart = React.memo(function NetworkChart({
             {chartDataKey.length} {t("ServerMonitorCount")}
           </CardDescription>
         </div>
-        <div className="flex flex-wrap">
+        <div className="flex flex-wrap">{chartButtons}</div>
-          {chartButtons}
-        </div>
       </CardHeader>
       <CardContent className="px-2 sm:p-6">
         <ChartContainer
@@ -191,7 +196,11 @@ export const NetworkChart = React.memo(function NetworkChart({
         >
           <LineChart
             accessibilityLayer
-            data={activeChart === defaultChart ? formattedData : chartData[activeChart]}
+            data={
+              activeChart === defaultChart
+                ? formattedData
+                : chartData[activeChart]
+            }
             margin={{ left: 12, right: 12 }}
           >
             <CartesianGrid vertical={false} />
@@ -235,7 +244,6 @@ export const NetworkChart = React.memo(function NetworkChart({
   );
 });
 
-
 const transformData = (data: NezhaAPIMonitor[]) => {
   const monitorData: ServerMonitorChart = {};
 
@@ -255,7 +263,7 @@ const transformData = (data: NezhaAPIMonitor[]) => {
   });
 
   return monitorData;
-}
+};
 
 const formatData = (rawData: NezhaAPIMonitor[]) => {
   const result: { [time: number]: ResultItem } = {};

app/[locale]/(main)/detail/[id]/page.tsx

@@ -0,0 +1,7 @@
+export default function Page({ params }: { params: { id: string } }) {
+  return (
+    <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
+      {params.id}
+    </div>
+  );
+}

components/ServerCard.tsx

@@ -36,11 +36,20 @@ export default function ServerCard({
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
       }
     >
-      <Popover>
+      {/* <Popover>
         <PopoverTrigger asChild>
+          
+        </PopoverTrigger>
+        <PopoverContent side="top">
+          <ServerCardPopover status={props.status} host={props.host} />
+        </PopoverContent>
+      </Popover> */}
       <section
-            className="grid items-center gap-2 lg:w-28"
+        className="grid items-center gap-2 lg:w-28 cursor-pointer"
         style={{ gridTemplateColumns: "auto 1fr auto" }}
+        onClick={() => {
+          router.push(`/${locale}/detail/${id}`);
+        }}
       >
         <div
           className={cn(
@@ -60,11 +69,6 @@ export default function ServerCard({
         </p>
         <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
       </section>
-        </PopoverTrigger>
-        <PopoverContent side="top">
-          <ServerCardPopover status={props.status} host={props.host} />
-        </PopoverContent>
-      </Popover>
       <div
         onClick={() => {
           router.push(`/${locale}/${id}`);