Marc Mintel
e04282d77e
Some checks failed
CI / lint-typecheck (pull_request) Failing after 10s
CI / tests (pull_request) Has been skipped
CI / contract-tests (pull_request) Has been skipped
CI / e2e-tests (pull_request) Has been skipped
CI / comment-pr (pull_request) Has been skipped
CI / commit-types (pull_request) Has been skipped
83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Text } from '@/ui/Text';
|
|
import { Group } from '@/ui/Group';
|
|
import { NotFoundActions } from './NotFoundActions';
|
|
import { NotFoundDiagnostics } from './NotFoundDiagnostics';
|
|
import { NotFoundHelpLinks } from './NotFoundHelpLinks';
|
|
import React from 'react';
|
|
|
|
interface NotFoundScreenProps {
|
|
errorCode: string;
|
|
title: string;
|
|
message: string;
|
|
actionLabel: string;
|
|
onActionClick: () => void;
|
|
}
|
|
|
|
/**
|
|
* NotFoundScreen
|
|
*
|
|
* App-specific semantic component for 404 states.
|
|
* Encapsulates the visual representation of the "Off Track" state.
|
|
* Redesigned for "Precision Racing Minimal" theme.
|
|
*/
|
|
export function NotFoundScreen({
|
|
errorCode,
|
|
title,
|
|
message,
|
|
actionLabel,
|
|
onActionClick
|
|
}: NotFoundScreenProps) {
|
|
const helpLinks = [
|
|
{ label: 'Support', href: '/support' },
|
|
{ label: 'Status', href: '/status' },
|
|
{ label: 'Documentation', href: '/docs' },
|
|
];
|
|
|
|
return (
|
|
<ErrorPageContainer size="lg" variant="glass">
|
|
{/* Background Glow Accent */}
|
|
<Glow color="primary" size="xl" opacity={0.1} position="center" />
|
|
|
|
<Group direction="column" align="center" gap={8} fullWidth>
|
|
<NotFoundDiagnostics errorCode={errorCode} />
|
|
|
|
<Group direction="column" align="center" gap={4} fullWidth>
|
|
<Text
|
|
as="h1"
|
|
data-testid="error-title"
|
|
size="4xl"
|
|
weight="bold"
|
|
variant="high"
|
|
uppercase
|
|
block
|
|
align="center"
|
|
>
|
|
{title}
|
|
</Text>
|
|
|
|
<Text
|
|
size="xl"
|
|
variant="med"
|
|
block
|
|
weight="medium"
|
|
align="center"
|
|
>
|
|
{message}
|
|
</Text>
|
|
</Group>
|
|
|
|
<NotFoundActions
|
|
primaryLabel={actionLabel}
|
|
onPrimaryClick={onActionClick}
|
|
/>
|
|
|
|
<NotFoundHelpLinks links={helpLinks} />
|
|
</Group>
|
|
</ErrorPageContainer>
|
|
);
|
|
}
|