Function SensorDropdownButton

app/src/components/AgentCard/SensorModal.tsx:27–87

({
  icon: Icon,
  label,
  colorClass,
  agents,
  onSelect
}: {
  icon: React.ElementType;
  label: string;
  colorClass?: string;
  agents: { id: string; name: string }[];
  onSelect: (agentId: string) => void;
})

// Sensor Dropdown Button Component
const SensorDropdownButton = ({
  icon: Icon,
  label,
  colorClass,
  agents,
  onSelect
}: {
  icon: React.ElementType;
  label: string;
  colorClass?: string;
  agents: { id: string; name: string }[];
  onSelect: (agentId: string) => void;
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => document.removeEventListener('mousedown', handleClickOutside);
    }
  }, [isOpen]);

  if (agents.length === 0) return null;

  return (
    <div ref={dropdownRef} className="relative flex-grow md:flex-grow-0">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`w-full flex items-center justify-center space-x-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors ${colorClass || 'text-gray-700'}`}
      >
        <Icon className="h-5 w-5" />
        <span className="text-sm font-medium">{label}</span>
        <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
      </button>

      {isOpen && (
        <div className="absolute z-30 bottom-full mb-1 w-full min-w-[200px] max-h-60 bg-white border border-gray-300 rounded-md shadow-lg overflow-y-auto overscroll-contain" style={{ WebkitOverflowScrolling: 'touch' }}>
          {agents.map((agent) => (
            <button
              key={agent.id}
              onClick={() => {
                onSelect(agent.id);
                setIsOpen(false);
              }}
              className="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 transition-colors"
            >
              {agent.name}
            </button>
          ))}
        </div>
      )}