website refactor

apps/website/components/sponsors/BillingSummaryPanel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Box, BoxProps } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface BillingStatProps {
+  label: string;
+  value: string | number;
+  subValue?: string;
+  icon: LucideIcon;
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+}
+
+function BillingStat({ label, value, subValue, icon, variant = 'default' }: BillingStatProps) {
+  const colorMap = {
+    default: 'text-white',
+    success: 'text-performance-green',
+    warning: 'text-warning-amber',
+    danger: 'text-racing-red',
+    info: 'text-primary-blue',
+  };
+
+  const bgMap = {
+    default: 'bg-iron-gray/50',
+    success: 'bg-performance-green/10',
+    warning: 'bg-warning-amber/10',
+    danger: 'bg-racing-red/10',
+    info: 'bg-primary-blue/10',
+  };
+
+  return (
+    <Box p={4} bg="bg-iron-gray/20" rounded="lg" border borderColor="border-charcoal-outline/50">
+      <Stack direction="row" align="center" gap={3} mb={2}>
+        <Box p={2} rounded="md" bg={bgMap[variant] as BoxProps<'div'>['bg']}>
+          <Icon icon={icon} size={4} color={colorMap[variant] as any} />
+        </Box>
+        <Text size="xs" weight="medium" color="text-gray-500" uppercase letterSpacing="wider">
+          {label}
+        </Text>
+      </Stack>
+      <Box>
+        <Text size="xl" weight="bold" color={colorMap[variant] as any}>
+          {value}
+        </Text>
+        {subValue && (
+          <Text size="xs" color="text-gray-500" block mt={0.5}>
+            {subValue}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+interface BillingSummaryPanelProps {
+  stats: BillingStatProps[];
+}
+
+/**
+ * BillingSummaryPanel
+ * 
+ * A semantic panel for displaying billing metrics.
+ * Dense, grid-based layout for financial data.
+ */
+export function BillingSummaryPanel({ stats }: BillingSummaryPanelProps) {
+  return (
+    <Box display="grid" gridCols={{ base: 1, sm: 2, lg: 4 }} gap={4} mb={8}>
+      {stats.map((stat, index) => (
+        <BillingStat key={index} {...stat} />
+      ))}
+    </Box>
+  );
+}