website refactor

apps/website/ui/LoadingSpinner.tsx

@@ -1,26 +1,41 @@
 import React from 'react';
 import { Box } from './primitives/Box';
 
-interface LoadingSpinnerProps {
-  size?: number;
-  color?: string;
-  className?: string;
+export interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg' | number;
+  intent?: 'primary' | 'high' | 'low';
 }
 
-export function LoadingSpinner({ size = 8, color = '#3b82f6', className = '' }: LoadingSpinnerProps) {
+export const LoadingSpinner = ({ 
+  size = 'md',
+  intent = 'primary' 
+}: LoadingSpinnerProps) => {
+  const sizeMap = {
+    sm: '1rem',
+    md: '2rem',
+    lg: '3rem',
+  };
+
+  const dimension = typeof size === 'string' ? sizeMap[size] : `${size * 0.25}rem`;
+
+  const intentColorMap = {
+    primary: 'var(--ui-color-intent-primary)',
+    high: 'var(--ui-color-text-high)',
+    low: 'var(--ui-color-text-low)',
+  };
+
   return (
     <Box 
-      w={`${size * 0.25}rem`}
-      h={`${size * 0.25}rem`}
-      rounded="full"
-      borderWidth="2px"
-      borderStyle="solid"
-      borderColor="transparent"
-      borderTopColor={color}
-      borderLeftColor={color}
-      className={`animate-spin ${className}`} 
+      width={dimension} 
+      height={dimension} 
+      style={{
+        border: '2px solid rgba(255, 255, 255, 0.1)',
+        borderTop: `2px solid ${intentColorMap[intent]}`,
+        borderRadius: '50%',
+      }}
+      className="animate-spin"
       role="status"
       aria-label="Loading"
     />
   );
-}
+};