refactor: complete application rewrite with modern UI

src/components/ui/Badge.tsx

@@ -0,0 +1,42 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: 'sm' | 'md';
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: 'bg-slate-100 text-slate-700',
+  success: 'bg-green-100 text-green-800',
+  warning: 'bg-yellow-100 text-yellow-800',
+  danger: 'bg-red-100 text-red-800',
+  info: 'bg-blue-100 text-blue-800',
+};
+
+const sizeStyles: Record<'sm' | 'md', string> = {
+  sm: 'px-1.5 py-0.5 text-xs',
+  md: 'px-2 py-1 text-sm',
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className = '', variant = 'default', size = 'sm', children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={`
+          inline-flex items-center font-medium rounded-full
+          ${variantStyles[variant]}
+          ${sizeStyles[size]}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';