Develop Frontend Components for Project, Package, and Instance Views

frontend/src/components/Badge.tsx

@@ -0,0 +1,17 @@
+import './Badge.css';
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'public' | 'private';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  className?: string;
+}
+
+export function Badge({ children, variant = 'default', className = '' }: BadgeProps) {
+  return (
+    <span className={`badge badge--${variant} ${className}`.trim()}>
+      {children}
+    </span>
+  );
+}