47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
// app/error.tsx atau app/some-path/error.tsx
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { useEffect } from "react";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
|
||
|
|
export default function GlobalError({
|
||
|
|
error,
|
||
|
|
reset,
|
||
|
|
}: Readonly<{
|
||
|
|
error: Error;
|
||
|
|
reset: () => void;
|
||
|
|
}>) {
|
||
|
|
useEffect(() => {
|
||
|
|
toast.error(error.message || "Terjadi kesalahan.");
|
||
|
|
}, [error]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex flex-col items-center justify-center px-6 bg-white text-gray-800">
|
||
|
|
<div className="text-center">
|
||
|
|
<h1 className="text-5xl font-bold text-primary mb-4">Error</h1>
|
||
|
|
<h2 className="text-2xl font-semibold mb-2">Terjadi Kesalahan</h2>
|
||
|
|
<p className="text-gray-600 mb-6 max-w-md mx-auto">
|
||
|
|
Maaf, terjadi kesalahan yang tidak terduga. Silakan coba lagi atau
|
||
|
|
kembali ke beranda.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="flex gap-4 justify-center">
|
||
|
|
<button
|
||
|
|
onClick={reset}
|
||
|
|
className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded transition duration-200"
|
||
|
|
>
|
||
|
|
Coba Lagi
|
||
|
|
</button>
|
||
|
|
<Link
|
||
|
|
href="/"
|
||
|
|
className="inline-block bg-primary hover:bg-primary-dark text-white font-medium py-2 px-4 rounded transition duration-200"
|
||
|
|
>
|
||
|
|
Kembali ke Beranda
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|