From 22e37320a869b20f1f4490e153b05eeb23cee27d Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 8 Nov 2025 01:33:37 +0000
Subject: [PATCH] ArmBadge component for displaying arm affiliation

cgen-fc75f12dce0444fcbcf2e298912227b1
---
 .../components/creator-network/ArmBadge.tsx   | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 client/components/creator-network/ArmBadge.tsx

diff --git a/client/components/creator-network/ArmBadge.tsx b/client/components/creator-network/ArmBadge.tsx
new file mode 100644
index 00000000..46869b5f
--- /dev/null
+++ b/client/components/creator-network/ArmBadge.tsx
@@ -0,0 +1,45 @@
+import { Badge } from "@/components/ui/badge";
+
+const ARM_COLORS: Record<string, { bg: string; text: string; icon: string }> = {
+  labs: {
+    bg: "bg-yellow-500/10",
+    text: "text-yellow-300",
+    icon: "🔬",
+  },
+  gameforge: {
+    bg: "bg-green-500/10",
+    text: "text-green-300",
+    icon: "🎮",
+  },
+  corp: {
+    bg: "bg-blue-500/10",
+    text: "text-blue-300",
+    icon: "💼",
+  },
+  foundation: {
+    bg: "bg-red-500/10",
+    text: "text-red-300",
+    icon: "🎓",
+  },
+  devlink: {
+    bg: "bg-cyan-500/10",
+    text: "text-cyan-300",
+    icon: "🔗",
+  },
+};
+
+export interface ArmBadgeProps {
+  arm: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function ArmBadge({ arm, size = "md" }: ArmBadgeProps) {
+  const colors = ARM_COLORS[arm.toLowerCase()] || ARM_COLORS.labs;
+  const sizeClass = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
+
+  return (
+    <Badge className={`${colors.bg} border-0 ${colors.text} ${sizeClass}`}>
+      {colors.icon} {arm.charAt(0).toUpperCase() + arm.slice(1)}
+    </Badge>
+  );
+}