Polish public error and 404 screens with brand atmosphere.
Local Build and Deploy / deploy (push) Successful in 1m31s
Local Build and Deploy / deploy (push) Successful in 1m31s
Shared ErrorScreen composition, i18n for en/nl/it, Sentry on route errors, and a self-contained global-error fallback that matches the hotel gold theme. Co-authored-by: Cursor <[email protected]>
This commit is contained in:
1 parent
b22725d3a9
commit
1f552c2822
8 files changed
+348
-80
No files matched your search
@@ -0,0 +1,37 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
/**
|
||||
* Shared public error / empty-route composition.
|
||||
* Used by route error.tsx and not-found.tsx (inside the app shell).
|
||||
*/
|
||||
export function ErrorScreen({
|
||||
code,
|
||||
title,
|
||||
subtitle,
|
||||
body,
|
||||
actions,
|
||||
footer,
|
||||
}: {
|
||||
code: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
body: string;
|
||||
actions: ReactNode;
|
||||
footer?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<main className="error-screen">
|
||||
<div className="error-screen-glow" aria-hidden />
|
||||
<section className="error-screen-panel" aria-labelledby="error-screen-title">
|
||||
<p className="error-screen-code">{code}</p>
|
||||
<h1 id="error-screen-title" className="error-screen-title">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="error-screen-subtitle">{subtitle}</p>
|
||||
<p className="error-screen-body">{body}</p>
|
||||
<div className="error-screen-actions">{actions}</div>
|
||||
{footer ? <div className="error-screen-footer">{footer}</div> : null}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user