website refactor

apps/website/components/errors/ErrorDetailsBlock.tsx

@@ -3,10 +3,10 @@
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
-import { ChevronDown, ChevronUp, Copy } from 'lucide-react';
-import { useState } from 'react';
+import { Accordion } from '@/ui/Accordion';
+import { Copy } from 'lucide-react';
+import React, { useState } from 'react';
 
 interface ErrorDetailsBlockProps {
   error: Error & { digest?: string };
@@ -19,7 +19,6 @@ interface ErrorDetailsBlockProps {
  * Follows "Precision Racing Minimal" theme.
  */
 export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
-  const [showDetails, setShowDetails] = useState(false);
   const [copied, setCopied] = useState(false);
 
   const copyError = async () => {
@@ -41,61 +40,28 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
   };
 
   return (
-    <Stack gap={4} fullWidth pt={4} borderTop borderColor="border-white">
-      <Stack 
-        as="button"
-        onClick={() => setShowDetails(!showDetails)}
-        direction="row"
-        align="center"
-        justify="center"
-        gap={2}
-        className="transition-all"
-      >
-        <Text 
-          size="xs" 
-          color="text-gray-500" 
-          className="hover:text-gray-300 flex items-center gap-2"
-          uppercase 
-          letterSpacing="widest" 
-          weight="medium"
-        >
-          {showDetails ? <Icon icon={ChevronUp} size={3} /> : <Icon icon={ChevronDown} size={3} />}
-          {showDetails ? 'Hide Technical Logs' : 'Show Technical Logs'}
-        </Text>
-      </Stack>
-
-      {showDetails && (
-        <Stack gap={3}>
-          <Card 
-            variant="outline"
-            rounded="md" 
-            p={4} 
-            fullWidth
-            maxHeight="48"
-            overflow="auto"
-            borderColor="border-white"
-            className="bg-graphite-black/40"
-          >
-            <Text font="mono" size="xs" color="text-gray-500" block leading="relaxed">
+    <div style={{ width: '100%', marginTop: '1.5rem', paddingTop: '1.5rem', borderTop: '1px solid var(--ui-color-border-muted)' }}>
+      <Accordion title="Technical Logs">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Card variant="outline">
+            <Text font="mono" size="xs" variant="low" block leading="relaxed" style={{ maxHeight: '12rem', overflow: 'auto' }}>
               {error.stack || 'No stack trace available'}
               {error.digest && `\n\nDigest: ${error.digest}`}
             </Text>
           </Card>
           
-          <Stack direction="row" justify="end">
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Button 
               variant="secondary" 
               size="sm"
               onClick={copyError}
-              icon={<Icon icon={Copy} size={3} />}
-              height="8"
-              fontSize="10px"
+              icon={<Icon icon={Copy} size={3} intent="low" />}
             >
-              {copied ? 'Copied to Clipboard' : 'Copy Error Details'}
+              {copied ? 'Copied!' : 'Copy Details'}
             </Button>
-          </Stack>
-        </Stack>
-      )}
-    </Stack>
+          </div>
+        </div>
+      </Accordion>
+    </div>
   );
 }