Squashed 'ai-context/trustgraph-templates/' content from commit 338a8ffa

git-subtree-dir: ai-context/trustgraph-templates
git-subtree-split: 338a8ffadb1439013071ae922e55ed2421f17025

src/components/common/Badge.tsx

@@ -0,0 +1,39 @@
+interface BadgeProps {
+  children: React.ReactNode;
+  color: string;
+  size?: "small" | "medium";
+  selected?: boolean;
+  onClick?: () => void;
+}
+
+export function Badge({
+  children,
+  color,
+  size = "medium",
+  selected = false,
+  onClick,
+}: BadgeProps) {
+  const isSmall = size === "small";
+
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        padding: isSmall ? "3px 8px" : "6px 12px",
+        borderRadius: isSmall ? 4 : 6,
+        border: `1px solid ${selected ? color : color + (isSmall ? "22" : "44")}`,
+        background: selected ? `${color}35` : `${color}${isSmall ? "10" : "15"}`,
+        color: isSmall ? color + "cc" : color,
+        cursor: onClick ? "pointer" : "default",
+        fontSize: isSmall ? 10 : 11,
+        fontFamily: "'IBM Plex Mono', monospace",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        boxShadow: selected ? `0 0 8px ${color}44` : "none",
+      }}
+    >
+      {children}
+    </button>
+  );
+}