website refactor

apps/website/components/errors/ErrorScreen.tsx

@@ -0,0 +1,80 @@
+'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>
+  );
+}