feat: add header router.push

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,32 +108,40 @@ 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(
-    const index = chartDataKey.indexOf(chart);
+    (chart: string) => {
-    return `hsl(var(--chart-${(index % 10) + 1}))`;
+      const index = chartDataKey.indexOf(chart);
-  }, [chartDataKey]);
+      return `hsl(var(--chart-${(index % 10) + 1}))`;
+    },
+    [chartDataKey],
+  );
 
-  const chartButtons = useMemo(() => (
+  const chartButtons = useMemo(
-    chartDataKey.map((key) => (
+    () =>
-      <button
+      chartDataKey.map((key) => (
-        key={key}
+        <button
-        data-active={activeChart === key}
+          key={key}
-        className={`relative z-30 flex flex-1 flex-col justify-center gap-1 border-b px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
+          data-active={activeChart === key}
-        onClick={() => handleButtonClick(key)}
+          className={`relative z-30 flex flex-1 flex-col justify-center gap-1 border-b px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
-      >
+          onClick={() => handleButtonClick(key)}
-        <span className="whitespace-nowrap text-xs text-muted-foreground">
+        >
-          {key}
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
-        </span>
+            {key}
-        <span className="text-md font-bold leading-none sm:text-lg">
+          </span>
-          {chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
+          <span className="text-md font-bold leading-none sm:text-lg">
-        </span>
+            {chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
-      </button>
+          </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)/header.tsx

@@ -6,7 +6,9 @@ import { Separator } from "@/components/ui/separator";
 import getEnv from "@/lib/env-entry";
 import { DateTime } from "luxon";
 import { useTranslations } from "next-intl";
+import { useLocale } from "next-intl";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import React, { useEffect, useRef, useState } from "react";
 
 function Header() {
@@ -15,10 +17,18 @@ function Header() {
   const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
   const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
 
+  const router = useRouter();
+  const locale = useLocale();
+
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
-        <section className="flex items-center text-base font-medium">
+        <section
+          onClick={() => {
+            router.push(`/${locale}/`);
+          }}
+          className="flex cursor-pointer items-center text-base font-medium"
+        >
           <div className="mr-1 flex flex-row items-center justify-start">
             <Image
               width={40}