62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface NotFoundPageProps {
|
|
title?: string;
|
|
message?: string;
|
|
statusCode?: string;
|
|
backLabel?: string;
|
|
backHref?: string;
|
|
onBack?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function NotFoundPage({
|
|
title = 'Page not found',
|
|
message = "The page you're looking for doesn't exist or has been moved.",
|
|
statusCode = '404',
|
|
backLabel = 'Go Back',
|
|
backHref,
|
|
onBack,
|
|
className = '',
|
|
}: NotFoundPageProps): ReactNode {
|
|
return (
|
|
<div className={`flex min-h-screen items-center justify-center p-4 ${className}`}>
|
|
<div className="mx-auto max-w-md text-center">
|
|
<div
|
|
className="mb-4 text-6xl font-bold"
|
|
style={{ color: 'var(--color-muted-foreground, #9ca3af)' }}
|
|
>
|
|
{statusCode}
|
|
</div>
|
|
<h2
|
|
className="mb-2 text-xl font-semibold"
|
|
style={{ color: 'var(--color-foreground, #111827)' }}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<p className="mb-6 text-sm" style={{ color: 'var(--color-muted-foreground, #6b7280)' }}>
|
|
{message}
|
|
</p>
|
|
{(onBack || backHref) &&
|
|
(backHref ? (
|
|
<a
|
|
href={backHref}
|
|
className="inline-block rounded-md px-4 py-2 text-sm font-medium text-white transition-colors"
|
|
style={{ backgroundColor: 'var(--color-primary, #2563eb)' }}
|
|
>
|
|
{backLabel}
|
|
</a>
|
|
) : (
|
|
<button
|
|
onClick={onBack}
|
|
className="rounded-md px-4 py-2 text-sm font-medium text-white transition-colors"
|
|
style={{ backgroundColor: 'var(--color-primary, #2563eb)' }}
|
|
>
|
|
{backLabel}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|