import { Head, Link } from "@inertiajs/react"; import { ShieldAlert, FileQuestion, ServerCrash, HardHat, Home, ArrowLeft } from "lucide-react"; import { Button } from "@/Components/ui/button"; interface Props { status: number; message?: string; } export default function ErrorPage({ status, message }: Props) { const errorDetails: Record = { 403: { title: "無此權限 (403)", description: "抱歉，您沒有權限存取此頁面。如果您認為這是個錯誤，請聯繫系統管理員。", icon: ShieldAlert, color: "text-yellow-500 bg-yellow-100 border-yellow-200", }, 404: { title: "頁面未找到 (404)", description: "抱歉，我們找不到您要訪問的頁面。它可能已被移除、更改名稱或暫時不可用。", icon: FileQuestion, color: "text-blue-500 bg-blue-100 border-blue-200", }, 500: { title: "伺服器錯誤 (500)", description: "抱歉，伺服器發生了內部錯誤。我們的技術團隊已經收到通知，正在努力修復中。", icon: ServerCrash, color: "text-red-500 bg-red-100 border-red-200", }, 503: { title: "服務維護中 (503)", description: "抱歉，系統目前正在進行維護。請稍後再試。", icon: HardHat, color: "text-orange-500 bg-orange-100 border-orange-200", }, }; const defaultError = { title: "發生錯誤", description: message || "發生了未知的錯誤。", icon: ShieldAlert, color: "text-gray-500 bg-gray-100 border-gray-200", }; const details = errorDetails[status] || defaultError; const Icon = details.icon; return (
{/* slide-in-bottom need to be defined in global css or just use simple animation */} {/* Icon Circle */}
{/* Text Content */}

{details.title}

{details.description}

{/* Actions */}
Error Code: {status} | Star ERP System
); }