Move version select to separate component

apps/web/src/components/Navigation/NavigationSubgroup.tsx

@@ -10,7 +10,6 @@ export function NavigationSubgroup({ subgroup }: { subgroup: NavSubgroup }) {
   const [isExpanded, setIsExpanded] = useState(false)
   const pathname = usePathname()
 
-  console.log('subgroup', subgroup)
   const isActive = subgroup.links.some((link) => link.href === pathname)
 
   // Automatically expand the subgroup if it's active

apps/web/src/components/Navigation/apiRefRoutes.json

@@ -0,0 +1,19 @@
+[
+  {
+    "title": "References",
+    "links": [
+      {
+        "title": "CLI",
+        "href": "/docs/api-reference/cli"
+      },
+      {
+        "title": "JS-SDK",
+        "href": "/docs/api-reference/js-sdk"
+      },
+      {
+        "title": "PYTHON-SDK",
+        "href": "/docs/api-reference/python-sdk"
+      }
+    ]
+  }
+]

apps/web/src/components/Navigation/index.tsx

@@ -7,6 +7,7 @@ import React, { useRef, useState } from 'react'
 
 import { useIsInsideMobileNavigation } from '@/components/MobileBurgerMenu'
 import { useSectionStore } from '@/components/SectionProvider'
+import { SdkVersionSelect } from '@/components/SDKVersionSelect'
 import { NavigationLink } from './NavigationLink'
 import { NavigationSubgroup } from './NavigationSubgroup'
 import {
@@ -118,25 +119,18 @@ function VersionedNavigationGroup({
         >
           {group.title}
         </motion.h2>
-        <select
-          className="text-xs text-brand-400"
-          value={curVersion}
-          onChange={(e) => {
-            setCurVersion(e.target.value)
-
+        <SdkVersionSelect
+          selectedVersion={curVersion}
+          versions={versions}
+          onVersionChange={(version) => {
+            setCurVersion(version)
             if (pathname !== '/docs/sdk-reference') {
               const pathParts = pathname.split('/')
-              pathParts[pathParts.length - 2] = e.target.value
+              pathParts[pathParts.length - 2] = version
               router.push(pathParts.join('/'))
             }
           }}
-        >
-          {versions.map((version, i) => (
-            <option key={version} value={version}>
-              {i === 0 ? `${version}@latest` : version}
-            </option>
-          ))}
-        </select>
+        />
       </div>
       <div className="relative">
         <ul role="list" className="border-l border-transparent">

apps/web/src/components/SdkVersionSelect.tsx

@@ -0,0 +1,28 @@
+export interface Props {
+  selectedVersion: string
+  versions: string[]
+  onVersionChange: (version: string) => void
+}
+
+
+export function SdkVersionSelect({
+  selectedVersion,
+  versions,
+  onVersionChange,
+}: Props) {
+  return (
+    <select
+      className="text-xs text-brand-400"
+      value={selectedVersion}
+      onChange={(e) => {
+        onVersionChange(e.target.value)
+      }}
+    >
+      {versions.map((version, i) => (
+        <option key={version} value={version}>
+          {i === 0 ? `${version}@latest` : version}
+        </option>
+      ))}
+    </select>
+  )
+}