website refactor

apps/website/ui/Badge.tsx

@@ -1,22 +1,16 @@
 import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { Box, BoxProps } from './primitives/Box';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
-interface BadgeProps {
+interface BadgeProps extends Omit<BoxProps<'div'>, 'children'> {
   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;
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 }
 
-export function Badge({ children, className = '', variant = 'default', size = 'sm', icon, style, bg, color, borderColor, rounded = 'none' }: BadgeProps) {
+export function Badge({ children, className = '', variant = 'default', size = 'sm', icon, rounded = 'none', ...props }: BadgeProps) {
   const baseClasses = 'flex items-center gap-1.5 border font-bold uppercase tracking-widest';
   
   const sizeClasses = {
@@ -47,16 +41,13 @@ export function Badge({ children, className = '', variant = 'default', size = 's
   const classes = [
     baseClasses, 
     sizeClasses[size],
-    roundedClasses[rounded],
-    !bg && !color && !borderColor ? variantClasses[variant] : '',
-    bg,
-    color,
-    borderColor,
+    typeof rounded === 'string' && roundedClasses[rounded as keyof typeof roundedClasses] ? roundedClasses[rounded as keyof typeof roundedClasses] : '',
+    !props.bg && !props.color && !props.borderColor ? variantClasses[variant] : '',
     className
   ].filter(Boolean).join(' ');
 
   return (
-    <Box className={classes} style={style}>
+    <Box className={classes} {...props}>
       {icon && <Icon icon={icon} size={3} />}
       {children}
     </Box>