Files
goodgo-platform/apps/web/app/(admin)/error.tsx
Ho Ngoc Hai a590a41e73 feat(web): add loading skeletons, error boundaries, and accessibility improvements
- Add segment-level loading.tsx for dashboard, search, admin, and auth routes
- Add segment-level error.tsx with Vietnamese error messages for all route groups
- Add skip-to-content navigation link in root layout
- Add id="main-content" to all layout main elements
- Add aria-label to nav elements and mobile menu buttons
- Improve dashboard nav responsiveness (icon-only on mobile)
- Hide user name on small screens in dashboard layout

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-08 13:48:33 +07:00

59 lines
1.9 KiB
TypeScript

'use client';
import { useEffect } from 'react';
export default function AdminError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error('Admin error:', error);
}, [error]);
return (
<div className="flex min-h-[400px] flex-col items-center justify-center px-4">
<div className="mx-auto max-w-md text-center">
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-destructive/10">
<svg
className="h-7 w-7 text-destructive"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
<h2 className="mt-4 text-xl font-semibold">Lỗi trang quản trị</h2>
<p className="mt-2 text-sm text-muted-foreground">
Không thể tải trang quản trị. Vui lòng thử lại sau.
</p>
{error.digest && (
<p className="mt-1 text-xs text-muted-foreground"> lỗi: {error.digest}</p>
)}
<div className="mt-6 flex justify-center gap-3">
<button
onClick={reset}
className="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90"
>
Thử lại
</button>
<a
href="/admin"
className="inline-flex h-9 items-center rounded-md border border-input bg-background px-4 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
>
Tải lại trang
</a>
</div>
</div>
</div>
);
}