website refactor

apps/website/components/dev/sections/APIStatusSection.tsx

@@ -2,11 +2,11 @@
 
 import React from 'react';
 import { Activity, Wifi, RefreshCw, Terminal } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Button } from '@/ui/Button';
+import { Grid } from '@/ui/Grid';
 import { StatusIndicator, StatRow, Badge } from '@/ui/StatusIndicator';
 
 interface APIStatusSectionProps {
@@ -60,13 +60,13 @@ export function APIStatusSection({
   const consecutiveFailuresLabel = String(apiHealth.consecutiveFailures);
 
   return (
-    <Box>
-      <Box display="flex" alignItems="center" gap={2} mb={3}>
+    <Stack>
+      <Stack direction="row" align="center" gap={2} mb={3}>
         <Icon icon={Activity} size={4} color="rgb(156, 163, 175)" />
         <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
           API Status
         </Text>
-      </Box>
+      </Stack>
 
       {/* Status Indicator */}
       <StatusIndicator 
@@ -76,7 +76,7 @@ export function APIStatusSection({
         variant={getStatusVariant()}
       />
 
-      <Box mt={2}>
+      <Stack mt={2}>
         {/* Reliability */}
         <StatRow 
           label="Reliability"
@@ -91,29 +91,29 @@ export function APIStatusSection({
           valueColor="text-primary-blue"
           valueFont="mono"
         />
-      </Box>
+      </Stack>
 
       {/* Consecutive Failures */}
       {apiHealth.consecutiveFailures > 0 && (
-        <Box mt={2}>
+        <Stack mt={2}>
           <StatusIndicator 
             icon={Activity}
             label="Consecutive Failures"
             subLabel={consecutiveFailuresLabel}
             variant="danger"
           />
-        </Box>
+        </Stack>
       )}
 
       {/* Circuit Breakers */}
-      <Box mt={2}>
+      <Stack mt={2}>
         <Text size="xs" color="text-gray-500" block mb={1}>Circuit Breakers:</Text>
         {Object.keys(circuitBreakers).length === 0 ? (
           <Text size="xs" color="text-gray-500" italic>None active</Text>
         ) : (
           <Stack gap={1} maxHeight="4rem" overflow="auto">
             {Object.entries(circuitBreakers).map(([endpoint, status]) => (
-              <Box key={endpoint} display="flex" alignItems="center" justifyContent="between">
+              <Stack key={endpoint} direction="row" align="center" justify="between">
                 <Text size="xs" color="text-gray-400" truncate flexGrow={1}>
                   {endpoint}
                 </Text>
@@ -123,14 +123,14 @@ export function APIStatusSection({
                 {status.failures > 0 && (
                   <Text size="xs" color="text-red-400" ml={1}>({status.failures})</Text>
                 )}
-              </Box>
+              </Stack>
             ))}
           </Stack>
         )}
-      </Box>
+      </Stack>
 
       {/* API Actions */}
-      <Box display="grid" gridCols={2} gap={2} mt={3}>
+      <Grid cols={2} gap={2} mt={3}>
         <Button
           variant="primary"
           onClick={onHealthCheck}
@@ -147,9 +147,9 @@ export function APIStatusSection({
         >
           Reset Stats
         </Button>
-      </Box>
+      </Grid>
 
-      <Box display="grid" gridCols={1} gap={2} mt={2}>
+      <Grid cols={1} gap={2} mt={2}>
         <Button
           variant="danger"
           onClick={onTestError}
@@ -158,13 +158,13 @@ export function APIStatusSection({
         >
           Test Error Handler
         </Button>
-      </Box>
+      </Grid>
 
-      <Box mt={2}>
+      <Stack mt={2}>
         <Text size="xs" color="text-gray-600">
           Last Check: {lastCheckLabel}
         </Text>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }