website refactor

apps/website/ui/ProgressBar.tsx

@@ -1,33 +1,55 @@
 import React from 'react';
-import { Box, BoxProps } from './primitives/Box';
+import { Box } from './primitives/Box';
 
-interface ProgressBarProps extends Omit<BoxProps<'div'>, 'children'> {
+export interface ProgressBarProps {
   value: number;
-  max: number;
-  color?: string;
-  bg?: string;
-  height?: string;
+  max?: number;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
+  color?: string; // Alias for intent
+  size?: 'sm' | 'md' | 'lg';
+  marginBottom?: any;
+  mb?: any; // Alias for marginBottom
 }
 
-export function ProgressBar({
-  value,
-  max,
-  color = 'bg-primary-blue',
-  bg = 'bg-deep-graphite',
-  height = '2',
-  ...props
-}: ProgressBarProps) {
-  const percentage = Math.min((value / max) * 100, 100);
+export const ProgressBar = ({ 
+  value, 
+  max = 100, 
+  intent = 'primary',
+  color: colorProp,
+  size = 'md',
+  marginBottom,
+  mb
+}: ProgressBarProps) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  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 color = colorProp || intentColorMap[intent];
+
+  const sizeMap = {
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '1rem',
+  };
 
   return (
-    <Box fullWidth bg={bg} rounded="full" height={height} overflow="hidden" {...props}>
+    <Box 
+      fullWidth 
+      bg="var(--ui-color-bg-surface-muted)" 
+      style={{ height: sizeMap[size], borderRadius: '9999px', overflow: 'hidden' }}
+      marginBottom={marginBottom || mb}
+    >
       <Box 
-        bg={color} 
-        rounded="full" 
         fullHeight 
-        style={{ width: `${percentage}%` }} 
-        className="transition-all duration-500 ease-out"
+        bg={color} 
+        style={{ width: `${percentage}%`, transition: 'width 0.3s ease-in-out' }} 
       />
     </Box>
   );
-}
+};