website refactor

apps/website/ui/Badge.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Box } from './Box';
+import { Box } from './primitives/Box';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
@@ -13,10 +13,11 @@ interface BadgeProps {
   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 }: BadgeProps) {
-  const baseClasses = 'flex items-center gap-1.5 rounded-none border font-bold uppercase tracking-widest';
+export function Badge({ children, className = '', variant = 'default', size = 'sm', icon, style, bg, color, borderColor, rounded = 'none' }: BadgeProps) {
+  const baseClasses = 'flex items-center gap-1.5 border font-bold uppercase tracking-widest';
   
   const sizeClasses = {
     xs: 'px-1.5 py-0.5 text-[9px]',
@@ -24,6 +25,16 @@ export function Badge({ children, className = '', variant = 'default', size = 's
     md: 'px-3 py-1 text-xs'
   };
 
+  const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+    full: 'rounded-full'
+  };
+
   const variantClasses = {
     default: 'bg-gray-500/10 border-gray-500/30 text-gray-400',
     primary: 'bg-primary-accent/10 border-primary-accent/30 text-primary-accent',
@@ -36,6 +47,7 @@ export function Badge({ children, className = '', variant = 'default', size = 's
   const classes = [
     baseClasses, 
     sizeClasses[size],
+    roundedClasses[rounded],
     !bg && !color && !borderColor ? variantClasses[variant] : '',
     bg,
     color,