website refactor

2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
--- a/apps/website/ui/StatusIndicator.tsx
+++ b/apps/website/ui/StatusIndicator.tsx
@@ -0,0 +1,109 @@
+
+
+import { LucideIcon } from 'lucide-react';
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+
+interface StatusIndicatorProps {
+  icon: LucideIcon;
+  label: string;
+  subLabel?: string;
+  variant: 'success' | 'warning' | 'danger' | 'info';
+}
+
+export function StatusIndicator({ icon, label, subLabel, variant }: StatusIndicatorProps) {
+  const colors = {
+    success: {
+      text: 'text-performance-green',
+      bg: 'bg-green-500/10',
+      border: 'border-green-500/30',
+      icon: 'rgb(16, 185, 129)'
+    },
+    warning: {
+      text: 'text-warning-amber',
+      bg: 'bg-yellow-500/10',
+      border: 'border-yellow-500/30',
+      icon: 'rgb(245, 158, 11)'
+    },
+    danger: {
+      text: 'text-red-400',
+      bg: 'bg-red-500/10',
+      border: 'border-red-500/30',
+      icon: 'rgb(239, 68, 68)'
+    },
+    info: {
+      text: 'text-primary-blue',
+      bg: 'bg-blue-500/10',
+      border: 'border-blue-500/30',
+      icon: 'rgb(59, 130, 246)'
+    }
+  };
+
+  const config = colors[variant];
+
+  return (
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="between" 
+      p={2} 
+      rounded="lg" 
+      bg={config.bg} 
+      border 
+      borderColor={config.border}
+    >
+      <Box display="flex" alignItems="center" gap={2}>
+        <Icon icon={icon} size={4} color={config.icon} />
+        <Text size="sm" weight="semibold" color="text-white">{label}</Text>
+      </Box>
+      {subLabel && (
+        <Text size="xs" color="text-gray-400">
+          {subLabel}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+interface StatRowProps {
+  label: string;
+  value: string | number;
+  valueColor?: string;
+  valueFont?: 'sans' | 'mono';
+}
+
+export function StatRow({ label, value, valueColor = 'text-white', valueFont = 'sans' }: StatRowProps) {
+  return (
+    <Box display="flex" alignItems="center" justifyContent="between">
+      <Text size="xs" color="text-gray-500">{label}</Text>
+      <Text size="xs" weight="bold" color={valueColor} font={valueFont}>
+        {value}
+      </Text>
+    </Box>
+  );
+}
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant: 'success' | 'warning' | 'danger' | 'info' | 'gray';
+  size?: 'xs' | 'sm';
+}
+
+export function Badge({ children, variant, size = 'xs' }: BadgeProps) {
+  const variants = {
+    success: 'bg-green-500/20 text-performance-green',
+    warning: 'bg-yellow-500/20 text-warning-amber',
+    danger: 'bg-red-500/20 text-red-400',
+    info: 'bg-blue-500/20 text-primary-blue',
+    gray: 'bg-gray-500/20 text-gray-400'
+  };
+
+  return (
+    <Box px={1} rounded="sm" bg={variants[variant]}>
+      <Text size={size} color="inherit">
+        {children}
+      </Text>
+    </Box>
+  );
+}