From 374fd8df7d0229f82e36b024bf3255d3be60db35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=93=E9=BC=A0?=
 <71394853+hamster1963@users.noreply.github.com>
Date: Tue, 26 Nov 2024 21:22:56 +0800
Subject: [PATCH] style: error-page (#4)

---
 src/error-page.tsx | 46 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/error-page.tsx b/src/error-page.tsx
index 07b9711..2500db5 100644
--- a/src/error-page.tsx
+++ b/src/error-page.tsx
@@ -1,16 +1,46 @@
-import { useRouteError } from "react-router-dom";
+import { useRouteError, useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { AlertCircle } from "lucide-react";
+
+interface RouterError {
+    statusText?: string;
+    message?: string;
+    status?: number;
+}
 
 export default function ErrorPage() {
-    const error: any = useRouteError();
+    const error = useRouteError() as RouterError;
+    const navigate = useNavigate();
     console.error(error);
 
     return (
-        <div id="error-page">
-            <h1>Oops!</h1>
-            <p>Sorry, an unexpected error has occurred.</p>
-            <p>
-                <i>{error.statusText || error.message}</i>
-            </p>
+        <div className="min-h-screen w-full flex items-center justify-center bg-background p-4">
+            <Card className="w-full max-w-md shadow-2xl rounded-2xl">
+                <CardContent className="pt-6 text-center space-y-4">
+                    <div className="flex justify-center">
+                        <AlertCircle className="h-12 w-12 text-destructive" />
+                    </div>
+                    <h1 className="text-4xl font-bold tracking-tight">Oops!</h1>
+                    <p className="text-lg text-muted-foreground/80">
+                        Sorry, an unexpected error has occurred.
+                    </p>
+                    <div className="p-4 bg-muted/70 rounded-lg">
+                        <p className="text-sm text-destructive font-semibold italic">
+                            {error.statusText || error.message}
+                        </p>
+                    </div>
+                </CardContent>
+                <CardFooter className="flex justify-center pb-6">
+                    <Button 
+                        variant="default" 
+                        size="lg"
+                        onClick={() => navigate('/dashboard')}
+                    >
+                        Back to Dashboard
+                    </Button>
+                </CardFooter>
+            </Card>
         </div>
     );
 }