From 8e4058dfb3cf8cad941c67af25910abb6d04dcba Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 8 Nov 2025 01:33:42 +0000
Subject: [PATCH] ArmFilter component for filtering by arm affiliation

cgen-1335ff5103d24f67bde3e0f48a591201
---
 .../components/creator-network/ArmFilter.tsx  | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 client/components/creator-network/ArmFilter.tsx

diff --git a/client/components/creator-network/ArmFilter.tsx b/client/components/creator-network/ArmFilter.tsx
new file mode 100644
index 00000000..1af43447
--- /dev/null
+++ b/client/components/creator-network/ArmFilter.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Check } from "lucide-react";
+
+const ARMS = [
+  { id: "labs", label: "Labs", icon: "🔬", color: "text-yellow-300" },
+  { id: "gameforge", label: "GameForge", icon: "🎮", color: "text-green-300" },
+  { id: "corp", label: "Corp", icon: "💼", color: "text-blue-300" },
+  { id: "foundation", label: "Foundation", icon: "🎓", color: "text-red-300" },
+  { id: "devlink", label: "Dev-Link", icon: "🔗", color: "text-cyan-300" },
+];
+
+export interface ArmFilterProps {
+  selectedArm?: string;
+  onArmChange: (arm: string | undefined) => void;
+}
+
+export function ArmFilter({ selectedArm, onArmChange }: ArmFilterProps) {
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold text-white">Filter by Arm</h3>
+      <div className="space-y-2">
+        <Button
+          onClick={() => onArmChange(undefined)}
+          variant={!selectedArm ? "default" : "ghost"}
+          className="w-full justify-start text-left"
+        >
+          {!selectedArm && <Check className="h-4 w-4 mr-2" />}
+          All Arms
+        </Button>
+        {ARMS.map((arm) => (
+          <Button
+            key={arm.id}
+            onClick={() => onArmChange(arm.id)}
+            variant={selectedArm === arm.id ? "default" : "ghost"}
+            className="w-full justify-start text-left"
+          >
+            {selectedArm === arm.id && <Check className="h-4 w-4 mr-2" />}
+            <span className="mr-2">{arm.icon}</span>
+            {arm.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}