website refactor

apps/website/ui/Badge.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+
+interface BadgeProps {
+  children: ReactNode;
+  className?: string;
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+}
+
+export function Badge({ children, className = '', variant = 'default' }: BadgeProps) {
+  const baseClasses = 'flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium';
+  
+  const variantClasses = {
+    default: 'bg-gray-500/10 border-gray-500/30 text-gray-400',
+    primary: 'bg-primary-blue/10 border-primary-blue/30 text-primary-blue',
+    success: 'bg-performance-green/10 border-performance-green/30 text-performance-green',
+    warning: 'bg-warning-amber/10 border-warning-amber/30 text-warning-amber',
+    danger: 'bg-red-600/10 border-red-600/30 text-red-500',
+    info: 'bg-neon-aqua/10 border-neon-aqua/30 text-neon-aqua'
+  };
+
+  const classes = [baseClasses, variantClasses[variant], className].filter(Boolean).join(' ');
+
+  return <Box className={classes}>{children}</Box>;
+}