142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/ui/Card';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { NotFoundActions } from './NotFoundActions';
|
|
import { NotFoundDiagnostics } from './NotFoundDiagnostics';
|
|
import { NotFoundHelpLinks } from './NotFoundHelpLinks';
|
|
|
|
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 (
|
|
<Stack
|
|
as="main"
|
|
minHeight="screen"
|
|
align="center"
|
|
justify="center"
|
|
bg="graphite-black"
|
|
position="relative"
|
|
overflow="hidden"
|
|
fullWidth
|
|
>
|
|
{/* Background Glow Accent */}
|
|
<Glow color="primary" size="xl" opacity={0.1} position="center" />
|
|
|
|
<Card
|
|
variant="outline"
|
|
p={12}
|
|
rounded="none"
|
|
maxWidth="2xl"
|
|
fullWidth
|
|
mx={6}
|
|
position="relative"
|
|
zIndex={10}
|
|
className="bg-white/5 backdrop-blur-md"
|
|
>
|
|
<Stack gap={12} align="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"
|
|
textAlign="center"
|
|
>
|
|
{title}
|
|
</Text>
|
|
</Stack>
|
|
|
|
{/* Visual Separator */}
|
|
<Stack width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" align="center" justify="center">
|
|
<Stack
|
|
w="3"
|
|
h="3"
|
|
bg="primary-accent"
|
|
>{null}</Stack>
|
|
</Stack>
|
|
|
|
{/* Message Section */}
|
|
<Text
|
|
size="xl"
|
|
color="text-gray-400"
|
|
maxWidth="lg"
|
|
leading="relaxed"
|
|
block
|
|
weight="medium"
|
|
textAlign="center"
|
|
>
|
|
{message}
|
|
</Text>
|
|
|
|
{/* Actions Section */}
|
|
<NotFoundActions
|
|
primaryLabel={actionLabel}
|
|
onPrimaryClick={onActionClick}
|
|
/>
|
|
|
|
{/* Footer Section */}
|
|
<Stack pt={8} width="full">
|
|
<Stack height="1px" width="full" bg="border-gray" opacity={0.1} mb={8}>{null}</Stack>
|
|
<NotFoundHelpLinks links={helpLinks} />
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Subtle Edge Details */}
|
|
<Stack
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
h="2px"
|
|
bg="primary-accent"
|
|
opacity={0.1}
|
|
>{null}</Stack>
|
|
<Stack
|
|
position="absolute"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
h="2px"
|
|
bg="primary-accent"
|
|
opacity={0.1}
|
|
>{null}</Stack>
|
|
</Stack>
|
|
);
|
|
}
|