142 lines
3.4 KiB
TypeScript
142 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { NotFoundActions } from './NotFoundActions';
|
|
import { NotFoundHelpLinks } from './NotFoundHelpLinks';
|
|
import { NotFoundDiagnostics } from './NotFoundDiagnostics';
|
|
|
|
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 (
|
|
<Box
|
|
as="main"
|
|
minHeight="100vh"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
bg="graphite-black"
|
|
position="relative"
|
|
overflow="hidden"
|
|
>
|
|
{/* Background Glow Accent */}
|
|
<Glow color="primary" size="xl" opacity={0.1} position="center" />
|
|
|
|
<Surface
|
|
variant="glass"
|
|
border
|
|
padding={12}
|
|
rounded="none"
|
|
maxWidth="2xl"
|
|
fullWidth
|
|
mx={6}
|
|
position="relative"
|
|
zIndex={10}
|
|
>
|
|
<Stack gap={12} align="center" textAlign="center">
|
|
{/* Header Section */}
|
|
<Stack gap={4} align="center">
|
|
<NotFoundDiagnostics errorCode={errorCode} />
|
|
|
|
<Text
|
|
as="h1"
|
|
size="4xl"
|
|
weight="bold"
|
|
color="text-white"
|
|
letterSpacing="tighter"
|
|
uppercase
|
|
block
|
|
leading="none"
|
|
>
|
|
{title}
|
|
</Text>
|
|
</Stack>
|
|
|
|
{/* Visual Separator */}
|
|
<Box width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" display="flex" alignItems="center" justifyContent="center">
|
|
<Box
|
|
width={3}
|
|
height={3}
|
|
bg="primary-accent"
|
|
/>
|
|
</Box>
|
|
|
|
{/* Message Section */}
|
|
<Text
|
|
size="xl"
|
|
color="text-gray-400"
|
|
maxWidth="lg"
|
|
leading="relaxed"
|
|
block
|
|
weight="medium"
|
|
>
|
|
{message}
|
|
</Text>
|
|
|
|
{/* Actions Section */}
|
|
<NotFoundActions
|
|
primaryLabel={actionLabel}
|
|
onPrimaryClick={onActionClick}
|
|
/>
|
|
|
|
{/* Footer Section */}
|
|
<Box pt={8} width="full">
|
|
<Box height="1px" width="full" bg="border-gray" opacity={0.1} mb={8} />
|
|
<NotFoundHelpLinks links={helpLinks} />
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
|
|
{/* Subtle Edge Details */}
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
height="2px"
|
|
bg="primary-accent"
|
|
opacity={0.1}
|
|
/>
|
|
<Box
|
|
position="absolute"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
height="2px"
|
|
bg="primary-accent"
|
|
opacity={0.1}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|