81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Text } from '@/ui/Text';
|
|
import { AppErrorBoundaryView } from './AppErrorBoundaryView';
|
|
import { ErrorRecoveryActions } from './ErrorRecoveryActions';
|
|
import { ErrorDetailsBlock } from './ErrorDetailsBlock';
|
|
|
|
interface ErrorScreenProps {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
onHome: () => void;
|
|
}
|
|
|
|
/**
|
|
* ErrorScreen
|
|
*
|
|
* Semantic component for the root-level error boundary.
|
|
* Follows "Precision Racing Minimal" theme.
|
|
*/
|
|
export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
|
|
return (
|
|
<Box
|
|
as="main"
|
|
minHeight="screen"
|
|
fullWidth
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
bg="bg-deep-graphite"
|
|
position="relative"
|
|
overflow="hidden"
|
|
px={6}
|
|
>
|
|
{/* Background Accents */}
|
|
<Glow color="primary" size="xl" position="center" opacity={0.05} />
|
|
|
|
<Surface
|
|
variant="glass"
|
|
border
|
|
rounded="lg"
|
|
padding={8}
|
|
maxWidth="2xl"
|
|
fullWidth
|
|
position="relative"
|
|
zIndex={10}
|
|
shadow="xl"
|
|
borderColor="border-white"
|
|
bgOpacity={0.05}
|
|
>
|
|
<AppErrorBoundaryView
|
|
title="System Malfunction"
|
|
description="The application encountered an unexpected state. Our telemetry has logged the incident."
|
|
>
|
|
{/* Error Message Summary */}
|
|
<Surface
|
|
variant="dark"
|
|
rounded="md"
|
|
padding={4}
|
|
fullWidth
|
|
border
|
|
borderColor="border-white"
|
|
bgOpacity={0.2}
|
|
>
|
|
<Text font="mono" size="sm" color="text-warning-amber" block>
|
|
{error.message || 'Unknown execution error'}
|
|
</Text>
|
|
</Surface>
|
|
|
|
<ErrorRecoveryActions onRetry={reset} onHome={onHome} />
|
|
|
|
<ErrorDetailsBlock error={error} />
|
|
</AppErrorBoundaryView>
|
|
</Surface>
|
|
</Box>
|
|
);
|
|
}
|