website refactor

apps/website/ui/ProgressBar.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, BoxProps } from './Box';
+
+interface ProgressBarProps extends Omit<BoxProps<'div'>, 'children'> {
+  value: number;
+  max: number;
+  color?: string;
+  bg?: string;
+  height?: string;
+}
+
+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);
+
+  return (
+    <Box fullWidth bg={bg} rounded="full" height={height} overflow="hidden" {...props}>
+      <Box 
+        bg={color} 
+        rounded="full" 
+        fullHeight 
+        style={{ width: `${percentage}%` }} 
+        className="transition-all duration-500 ease-out"
+      />
+    </Box>
+  );
+}