website refactor

apps/website/ui/HorizontalBarChart.tsx

@@ -1,28 +1,50 @@
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Stack } from './primitives/Stack';
 
-
-
-interface BarChartProps {
-  data: { label: string; value: number; color: string }[];
-  maxValue: number;
+export interface HorizontalBarChartItem {
+  label: string;
+  value: number;
+  color?: string;
 }
 
-export function HorizontalBarChart({ data, maxValue }: BarChartProps) {
+export interface HorizontalBarChartProps {
+  items?: HorizontalBarChartItem[];
+  total?: number;
+  data?: HorizontalBarChartItem[]; // Alias for items
+  maxValue?: number; // Alias for total
+}
+
+export const HorizontalBarChart = ({ 
+  items, 
+  total,
+  data,
+  maxValue 
+}: HorizontalBarChartProps) => {
+  const actualItems = items || data || [];
+  const actualTotal = total || maxValue || actualItems.reduce((acc, item) => acc + item.value, 0);
+
   return (
-    <div className="space-y-3">
-      {data.map((item) => (
-        <div key={item.label}>
-          <div className="flex justify-between text-sm mb-1">
-            <span className="text-gray-400">{item.label}</span>
-            <span className="text-white font-medium">{item.value}</span>
-          </div>
-          <div className="h-2 bg-charcoal-outline rounded-full overflow-hidden">
-            <div
-              className={`h-full rounded-full ${item.color} transition-all duration-500 ease-out`}
-              style={{ width: `${Math.min((item.value / maxValue) * 100, 100)}%` }}
-            />
-          </div>
-        </div>
-      ))}
-    </div>
+    <Box display="flex" flexDirection="col" gap={4}>
+      {actualItems.map((item, index) => {
+        const percentage = actualTotal > 0 ? (item.value / actualTotal) * 100 : 0;
+        return (
+          <Box key={index}>
+            <Stack direction="row" justify="between" marginBottom={1}>
+              <Text size="xs" variant="low" uppercase weight="bold">{item.label}</Text>
+              <Text size="xs" variant="high" weight="bold">{item.value}</Text>
+            </Stack>
+            <Box fullWidth height="0.5rem" bg="var(--ui-color-bg-surface-muted)" style={{ borderRadius: '9999px', overflow: 'hidden' }}>
+              <Box 
+                fullHeight 
+                bg={item.color || 'var(--ui-color-intent-primary)'} 
+                style={{ width: `${percentage}%`, transition: 'width 0.3s ease-in-out' }} 
+              />
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
   );
-}
+};