Deploy

src/components/ui/Badge.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: "primary" | "secondary" | "accent" | "outline"
+}
+
+export default function Badge({ variant = 'primary', className, ...props }: BadgeProps) {
+  const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors'
+  const variantClasses = {
+    primary: 'bg-primary text-primary-foreground',
+    secondary: 'bg-secondary text-secondary-foreground',
+    accent: 'bg-accent text-accent-foreground',
+    outline: 'border border-border bg-background text-foreground'
+  }
+  return (
+    <span className={cn(baseClasses, variantClasses[variant], className)} {...props} />
+  )
+}