1 files changed, 4 insertions, 54 deletions

diff --git a/website/src/components/Header.astro b/website/src/components/Header.astro
index 982efd2e..cfa3d759 100644
--- a/website/src/components/Header.astro
+++ b/website/src/components/Header.astro
@@ -6,19 +6,12 @@ import Search from 'virtual:starlight/components/Search';
 import SiteTitle from 'virtual:starlight/components/SiteTitle';
 import SocialIcons from 'virtual:starlight/components/SocialIcons';
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
+import DocsVersionSelect from './DocsVersionSelect.astro';
+import { docsRoute } from '../docs-path';
 
 const shouldRenderSearch =
   config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
-
-const pathname = Astro.url.pathname;
-const isDocs = pathname === '/docs/' || pathname.startsWith('/docs/');
-const isPreview = pathname === '/docs/preview/' || pathname.startsWith('/docs/preview/');
-const stableHref = isPreview ? pathname.replace(/^\/docs\/preview\/?/, '/docs/') : pathname;
-const previewHref = isPreview
-  ? pathname
-  : pathname === '/docs/'
-    ? '/docs/preview/'
-    : pathname.replace(/^\/docs\/?/, '/docs/preview/');
+const isDocs = docsRoute(Astro.url.pathname).isDocs;
 ---
 
 <div class="header">
@@ -26,12 +19,7 @@ const previewHref = isPreview
     <SiteTitle />
   </div>
   <div class="sl-flex print:hidden search-wrapper">
-    {isDocs && (
-      <nav class="docs-channel-switcher" aria-label="Documentation channel">
-        <a href={stableHref} aria-current={!isPreview ? 'page' : undefined}>Stable</a>
-        <a href={previewHref} aria-current={isPreview ? 'page' : undefined}>Preview</a>
-      </nav>
-    )}
+    {isDocs && <DocsVersionSelect />}
     {shouldRenderSearch && <Search />}
   </div>
   <div class="sl-hidden md:sl-flex print:hidden right-group">
@@ -66,38 +54,6 @@ const previewHref = isPreview
       min-width: 0;
     }
 
-    .docs-channel-switcher {
-      display: flex;
-      align-items: center;
-      border: 1px solid var(--sl-color-hairline);
-      border-radius: 4px;
-      overflow: hidden;
-      background: var(--sl-color-bg-nav);
-      font-size: var(--sl-text-xs);
-      font-weight: 700;
-      line-height: 1;
-      white-space: nowrap;
-    }
-
-    .docs-channel-switcher a {
-      color: var(--sl-color-gray-2);
-      text-decoration: none;
-      padding: 0.45rem 0.6rem;
-    }
-
-    .docs-channel-switcher a + a {
-      border-inline-start: 1px solid var(--sl-color-hairline);
-    }
-
-    .docs-channel-switcher a[aria-current="page"] {
-      color: var(--sl-color-accent-high);
-      background: color-mix(in srgb, var(--sl-color-accent) 14%, transparent);
-    }
-
-    .docs-channel-switcher a:hover {
-      color: var(--sl-color-accent-high);
-    }
-
     .right-group,
     .social-icons {
       gap: 1rem;
@@ -110,12 +66,6 @@ const previewHref = isPreview
       border-inline-end: 1px solid var(--sl-color-gray-5);
     }
 
-    @media (max-width: 38rem) {
-      .docs-channel-switcher {
-        display: none;
-      }
-    }
-
     @media (min-width: 50rem) {
       :global(:root[data-has-sidebar]) {
         --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));