import React, { useState } from "react"; import { Head, Link } from "@inertiajs/react"; interface ErrorProps { status: number; message?: string; } export default function Error({ status, message }: ErrorProps) { const [copied, setCopied] = useState(false); const [showDetails, setShowDetails] = useState(false); const errorConfigs: Record< number, { code: string; title: string; description: string; color: string } > = { 404: { code: "404", title: "Halaman Tidak Ditemukan", description: "Halaman atau data kunjungan yang Anda cari tidak ada, telah dihapus, atau URL yang dimasukkan salah.", color: "from-blue-500 to-indigo-600", }, 403: { code: "403", title: "Akses Ditolak", description: "Anda tidak memiliki izin atau hak akses yang cukup untuk membuka fitur halaman ini.", color: "from-amber-500 to-orange-600", }, 500: { code: "500", title: "Kesalahan Server", description: "Terjadi masalah pada sistem server kami. Tim teknis telah diberitahu mengenai masalah ini.", color: "from-rose-500 to-red-600", }, 503: { code: "503", title: "Sistem Sedang Pemeliharaan", description: "Layanan sedang ditingkatkan untuk sementara waktu. Silakan coba kembali beberapa saat lagi.", color: "from-emerald-500 to-teal-600", }, }; const config = errorConfigs[status] || { code: String(status), title: "Terjadi Kesalahan", description: "Sesuatu yang tidak terduga telah terjadi. Silakan kembali ke beranda.", color: "from-purple-500 to-violet-600", }; const handleCopyLink = () => { const errorLog = `Error ${status}: ${config.title}\nURL: ${window.location.href}\nDetail: ${message || "N/A"}`; navigator.clipboard.writeText(errorLog); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( <>
{/* Glow Effects Background */}
{/* Pattern Overlay */}
{/* Error Card */}
{/* Badge & Code */}
Status HTTP {status}

{config.code}

{config.title}

{config.description}

{/* Collapsible Technical Details */} {message && (
{showDetails && ( 
                                        {message}
)}
)} {/* Actions */}
Ke Beranda
); }