From ea92c91942f4a088759fe3f60a7131f3dc2de340 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Tue, 26 Nov 2024 14:19:19 +0800
Subject: [PATCH] fix: pageNotFound

---
 src/App.tsx                        |  2 ++
 src/components/Header.tsx          |  7 ++++++-
 src/locales/en/translation.json    |  4 ++++
 src/locales/zh-CN/translation.json |  4 ++++
 src/locales/zh-TW/translation.json |  4 ++++
 src/pages/NotFound.tsx             | 22 ++++++++++++++++++++++
 6 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/NotFound.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1646951..2b3744b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Server from "./pages/Server";
 import ServerDetail from "./pages/ServerDetail";
+import NotFound from "./pages/NotFound";
 
 const App: React.FC = () => {
   return (
@@ -14,6 +15,7 @@ const App: React.FC = () => {
           <Routes>
             <Route path="/" element={<Server />} />
             <Route path="/server/:id" element={<ServerDetail />} />
+            <Route path="*" element={<NotFound />} />
           </Routes>
           <Footer />
         </main>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0e22849..a3d4623 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -7,13 +7,18 @@ import { DateTime } from "luxon";
 import { useEffect, useRef, useState } from "react";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 function Header() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   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={() => navigate("/")}
+          className="cursor-pointer flex items-center text-base font-medium"
+        >
           <div className="mr-1 flex flex-row items-center justify-start">
             <img
               width={40}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 0ff5d00..b205f6e 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -53,5 +53,9 @@
     "light": "Light",
     "dark": "Dark",
     "system": "System"
+  },
+  "error": {
+    "pageNotFound": "Page not found",
+    "backToHome": "Back to home"
   }
 }
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 0876162..5b7a6db 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -53,5 +53,9 @@
     "light": "亮色",
     "dark": "暗色",
     "system": "跟随系统"
+  },
+  "error": {
+    "pageNotFound": "页面不存在",
+    "backToHome": "回到主页"
   }
 }
diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
index a87b08c..64dc93f 100644
--- a/src/locales/zh-TW/translation.json
+++ b/src/locales/zh-TW/translation.json
@@ -53,5 +53,9 @@
     "light": "亮色",
     "dark": "暗色",
     "system": "跟隨系統"
+  },
+  "error": {
+    "pageNotFound": "頁面不存在",
+    "backToHome": "回到主頁"
   }
 }
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
new file mode 100644
index 0000000..c7c6041
--- /dev/null
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export default function NotFound() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex  flex-col items-center justify-center">
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-4xl font-semibold">404</h1>
+        <p className="text-xl text-muted-foreground">
+          {t("error.pageNotFound")}
+        </p>
+        <Button onClick={() => navigate("/")} className="mt-2">
+          {t("error.backToHome")}
+        </Button>
+      </div>
+    </div>
+  );
+}