website refactor

apps/website/ui/StatusDot.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Box } from './primitives/Box';
 
-interface StatusDotProps {
-  color?: string;
+export interface StatusDotProps {
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
+  color?: string; // Alias for intent or custom color
   pulse?: boolean;
-  size?: number;
-  className?: string;
+  size?: 'sm' | 'md' | 'lg' | number;
 }
 
 /**
@@ -14,28 +14,41 @@ interface StatusDotProps {
  * A simple status indicator dot with optional pulse effect.
  */
 export function StatusDot({ 
-  color = '#4ED4E0', 
+  intent = 'telemetry', 
+  color: colorProp,
   pulse = false, 
-  size = 2,
-  className = '' 
+  size = 'md',
 }: StatusDotProps) {
-  const sizeClass = `w-${size} h-${size}`;
+  const intentColorMap = {
+    primary: 'var(--ui-color-intent-primary)',
+    success: 'var(--ui-color-intent-success)',
+    warning: 'var(--ui-color-intent-warning)',
+    critical: 'var(--ui-color-intent-critical)',
+    telemetry: 'var(--ui-color-intent-telemetry)',
+  };
+
+  const sizeMap = {
+    sm: '0.375rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+  };
+
+  const color = colorProp || intentColorMap[intent];
+  const dimension = typeof size === 'string' ? sizeMap[size] : `${size * 0.25}rem`;
   
   return (
-    <Box position="relative" className={`${sizeClass} ${className}`}>
+    <Box position="relative" width={dimension} height={dimension}>
       <Box 
-        w="full" 
-        h="full" 
-        rounded="full" 
-        style={{ backgroundColor: color }} 
+        fullWidth 
+        fullHeight 
+        style={{ backgroundColor: color, borderRadius: '9999px' }} 
       />
       {pulse && (
         <Box 
           position="absolute" 
           inset={0} 
-          rounded="full" 
           className="animate-ping" 
-          style={{ backgroundColor: color, opacity: 0.75 }} 
+          style={{ backgroundColor: color, opacity: 0.75, borderRadius: '9999px' }} 
         />
       )}
     </Box>