82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Text } from '@/ui/Text';
|
|
import { FooterSection } from '@/ui/FooterSection';
|
|
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" />
|
|
|
|
<NotFoundDiagnostics errorCode={errorCode} />
|
|
|
|
<Text
|
|
as="h1"
|
|
size="4xl"
|
|
weight="bold"
|
|
variant="high"
|
|
uppercase
|
|
block
|
|
align="center"
|
|
style={{ marginTop: '1rem', marginBottom: '2rem' }}
|
|
>
|
|
{title}
|
|
</Text>
|
|
|
|
<Text
|
|
size="xl"
|
|
variant="med"
|
|
block
|
|
weight="medium"
|
|
align="center"
|
|
style={{ marginBottom: '3rem' }}
|
|
>
|
|
{message}
|
|
</Text>
|
|
|
|
<NotFoundActions
|
|
primaryLabel={actionLabel}
|
|
onPrimaryClick={onActionClick}
|
|
/>
|
|
|
|
<FooterSection>
|
|
<NotFoundHelpLinks links={helpLinks} />
|
|
</FooterSection>
|
|
</ErrorPageContainer>
|
|
);
|
|
}
|