Spaces:
Sleeping
Sleeping
| import { Head, Link } from '@inertiajs/react'; | |
| import { AlertTriangle, Home, ServerCrash } from 'lucide-react'; | |
| import AppearanceToggle from '@/components/appearance-toggle'; | |
| import { Button } from '@/components/ui/button'; | |
| import { home } from '@/routes'; | |
| type ErrorProps = { | |
| message?: string | null; | |
| status?: number | null; | |
| }; | |
| const statusConfig: Record< | |
| number, | |
| { description: string; icon: typeof AlertTriangle; title: string } | |
| > = { | |
| 403: { | |
| description: 'Kamu tidak memiliki akses ke halaman ini.', | |
| icon: AlertTriangle, | |
| title: 'Akses Ditolak', | |
| }, | |
| 404: { | |
| description: 'Halaman yang kamu cari tidak ditemukan atau sudah dipindahkan.', | |
| icon: AlertTriangle, | |
| title: 'Halaman Tidak Ditemukan', | |
| }, | |
| 503: { | |
| description: 'Server sedang tidak bisa dihubungi. Silakan coba beberapa saat lagi.', | |
| icon: ServerCrash, | |
| title: 'Server Tidak Tersedia', | |
| }, | |
| }; | |
| export default function Error({ message, status }: ErrorProps) { | |
| const config = (status && statusConfig[status]) ?? { | |
| description: message ?? 'Terjadi kesalahan yang tidak terduga.', | |
| icon: AlertTriangle, | |
| title: 'Terjadi Kesalahan', | |
| }; | |
| const Icon = config.icon; | |
| return ( | |
| <> | |
| <Head title={config.title} /> | |
| <main className="error-shell"> | |
| <AppearanceToggle className="error-toggle" /> | |
| <div className="error-content"> | |
| <div className="error-icon"> | |
| <Icon className="size-8" /> | |
| </div> | |
| {status && ( | |
| <p className="error-code">{status}</p> | |
| )} | |
| <h1 className="error-title">{config.title}</h1> | |
| <p className="error-description"> | |
| {message ?? config.description} | |
| </p> | |
| <Button asChild> | |
| <Link href={home()}> | |
| <Home className="size-4" /> | |
| Kembali ke Beranda | |
| </Link> | |
| </Button> | |
| </div> | |
| </main> | |
| </> | |
| ); | |
| } | |