website refactor

apps/website/ui/Badge.tsx

@@ -1,15 +1,29 @@
 import React, { ReactNode } from 'react';
 import { Box } from './Box';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface BadgeProps {
   children: ReactNode;
   className?: string;
   variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  size?: 'xs' | 'sm' | 'md';
+  icon?: LucideIcon;
+  style?: React.CSSProperties;
+  bg?: string;
+  color?: string;
+  borderColor?: string;
 }
 
-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';
+export function Badge({ children, className = '', variant = 'default', size = 'sm', icon, style, bg, color, borderColor }: BadgeProps) {
+  const baseClasses = 'flex items-center gap-1.5 rounded-full border font-medium';
   
+  const sizeClasses = {
+    xs: 'px-1.5 py-0.5 text-[10px]',
+    sm: 'px-2.5 py-1 text-xs',
+    md: 'px-3 py-1.5 text-sm'
+  };
+
   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',
@@ -19,7 +33,20 @@ export function Badge({ children, className = '', variant = 'default' }: BadgePr
     info: 'bg-neon-aqua/10 border-neon-aqua/30 text-neon-aqua'
   };
 
-  const classes = [baseClasses, variantClasses[variant], className].filter(Boolean).join(' ');
+  const classes = [
+    baseClasses, 
+    sizeClasses[size],
+    !bg && !color && !borderColor ? variantClasses[variant] : '',
+    bg,
+    color,
+    borderColor,
+    className
+  ].filter(Boolean).join(' ');
 
-  return <Box className={classes}>{children}</Box>;
+  return (
+    <Box className={classes} style={style}>
+      {icon && <Icon icon={icon} size={3} />}
+      {children}
+    </Box>
+  );
 }