website refactor

apps/website/ui/Icon.tsx

@@ -4,77 +4,71 @@ import { Box, BoxProps } from './primitives/Box';
 
 export interface IconProps extends Omit<BoxProps<'div'>, 'children'> {
   icon: LucideIcon | React.ReactNode;
-  size?: number | string;
-  color?: string;
-  strokeWidth?: number;
-  animate?: string;
-  transition?: boolean;
-  groupHoverTextColor?: string;
-  groupHoverScale?: boolean;
+  size?: 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 16 | 'full' | number;
+  intent?: 'primary' | 'telemetry' | 'warning' | 'success' | 'critical' | 'high' | 'med' | 'low';
+  animate?: 'spin' | 'none';
 }
 
 export function Icon({ 
   icon: IconProp, 
   size = 4, 
-  color, 
-  className = '', 
-  style, 
-  animate, 
-  transition,
-  groupHoverTextColor,
-  groupHoverScale,
+  intent,
+  animate = 'none',
   ...props 
 }: IconProps) {
   const sizeMap: Record<string | number, string> = {
-    3: 'w-3 h-3',
-    3.5: 'w-3.5 h-3.5',
-    4: 'w-4 h-4',
-    5: 'w-5 h-5',
-    6: 'w-6 h-6',
-    7: 'w-7 h-7',
-    8: 'w-8 h-8',
-    10: 'w-10 h-10',
-    12: 'w-12 h-12',
-    16: 'w-16 h-16',
-    'full': 'w-full h-full'
+    3: '0.75rem',
+    3.5: '0.875rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    10: '2.5rem',
+    12: '3rem',
+    16: '4rem',
+    'full': '100%'
   };
 
-  const sizeClass = sizeMap[size] || 'w-4 h-4';
-  
-  // If color starts with 'text-', it's a tailwind class, so pass it as color prop to Box
-  const isTailwindColor = typeof color === 'string' && color.startsWith('text-');
-  const combinedStyle = color && !isTailwindColor ? { color, ...style } : style;
-  const boxColor = isTailwindColor ? color : undefined;
+  const dimension = typeof size === 'string' ? sizeMap[size] : (sizeMap[size] || `${size * 0.25}rem`);
 
-  const classes = [
-    sizeClass,
-    animate === 'spin' ? 'animate-spin' : '',
-    transition ? 'transition-all duration-150' : '',
-    groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
-    groupHoverScale ? 'group-hover:scale-110 transition-transform' : '',
-    className
-  ].filter(Boolean).join(' ');
+  const intentColorMap: Record<string, string> = {
+    primary: 'var(--ui-color-intent-primary)',
+    telemetry: 'var(--ui-color-intent-telemetry)',
+    warning: 'var(--ui-color-intent-warning)',
+    success: 'var(--ui-color-intent-success)',
+    critical: 'var(--ui-color-intent-critical)',
+    high: 'var(--ui-color-text-high)',
+    med: 'var(--ui-color-text-med)',
+    low: 'var(--ui-color-text-low)',
+  };
+
+  const style: React.CSSProperties = {
+    width: dimension,
+    height: dimension,
+    color: intent ? intentColorMap[intent] : undefined,
+  };
 
   const renderIcon = () => {
     if (!IconProp) return null;
     if (typeof IconProp === 'function' || (typeof IconProp === 'object' && 'render' in IconProp)) {
       const LucideIconComponent = IconProp as LucideIcon;
-      return <LucideIconComponent size="100%" strokeWidth={props.strokeWidth} />;
+      return <LucideIconComponent size="100%" />;
     }
     return IconProp;
   };
 
   return (
     <Box
-      className={classes}
-      style={combinedStyle}
-      color={boxColor}
       display="inline-flex"
       alignItems="center"
       justifyContent="center"
+      style={style}
       {...props}
     >
-      {renderIcon()}
+      <div className={animate === 'spin' ? 'animate-spin w-full h-full flex items-center justify-center' : 'w-full h-full flex items-center justify-center'}>
+        {renderIcon()}
+      </div>
     </Box>
   );
 }