website refactor

apps/website/ui/StatusBadge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text } from './Text';
+
+interface StatusBadgeProps {
+  children: React.ReactNode;
+  variant?: 'success' | 'warning' | 'error' | 'info';
+  className?: string;
+}
+
+export function StatusBadge({ 
+  children, 
+  variant = 'success',
+  className = ''
+}: StatusBadgeProps) {
+  const variantClasses = {
+    success: 'bg-performance-green/20 text-performance-green',
+    warning: 'bg-warning-amber/20 text-warning-amber',
+    error: 'bg-red-600/20 text-red-400',
+    info: 'bg-blue-500/20 text-blue-400'
+  };
+  
+  const classes = [
+    'px-2 py-1 text-xs rounded-full',
+    variantClasses[variant],
+    className
+  ].filter(Boolean).join(' ');
+  
+  return (
+    <Text size="xs" className={classes}>
+      {children}
+    </Text>
+  );
+}