feat: new error page using antd

src/pages/error-page.tsx

@@ -1,17 +1,14 @@
-import { useRouteError, isRouteErrorResponse } from "react-router-dom";
+import {
+    useRouteError,
+    isRouteErrorResponse,
+    useNavigate,
+} from "react-router-dom";
+import { Button, Result, Space } from "antd";
 
 const ErrorPage = () => {
-    const style: React.CSSProperties = {
+    const navigate = useNavigate();
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        height: "80vh",
-        lineHeight: "0.8",
-    };
-
     const error = useRouteError();
+
     const convertError = (error: unknown): string => {
         if (isRouteErrorResponse(error)) {
             return error.error?.message || error.statusText;
@@ -26,13 +23,21 @@ const ErrorPage = () => {
     };
 
     return (
-        <div style={style}>
+        <Result
-            <h1>Oops!</h1>
+            status="error"
-            <p>Sorry, an unexpected error has occurred.</p>
+            title="Sorry, an unexpected error has occurred."
-            <p>
+            subTitle={convertError(error)}
-                <i style={{ color: "#696969" }}>{convertError(error)}</i>
+            extra={
-            </p>
+                <Space wrap>
-        </div>
+                    <Button type="primary" onClick={() => navigate(-1)}>
+                        Previous Page
+                    </Button>
+                    <Button type="primary" onClick={() => navigate("/")}>
+                        Home
+                    </Button>
+                </Space>
+            }
+        />
     );
 };