npm - @supatent/supatent-docs - Versions diffs - 0.1.0 - Mend

@supatent/supatent-docs 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/chunk-QVZFIUSH.js +13777 -0
package/dist/index.d.ts +6 -0
package/dist/index.js +75 -0
package/dist/next-config.d.ts +20 -0
package/dist/next-config.js +305 -0
package/dist/types-Cf4pRODK.d.ts +60 -0
package/package.json +49 -0
package/runtime/middleware.ts +52 -0
package/runtime/src/app/[locale]/docs-internal/[[...slug]]/page.tsx +91 -0
package/runtime/src/app/[locale]/docs-internal/ai/all/route.ts +52 -0
package/runtime/src/app/[locale]/docs-internal/ai/index/route.ts +52 -0
package/runtime/src/app/[locale]/docs-internal/markdown/[...slug]/route.ts +50 -0
package/runtime/src/app/globals.css +1082 -0
package/runtime/src/app/layout.tsx +37 -0
package/runtime/src/app/page.tsx +26 -0
package/runtime/src/components/code-group-enhancer.tsx +128 -0
package/runtime/src/components/docs-shell.tsx +140 -0
package/runtime/src/components/header-dropdown.tsx +138 -0
package/runtime/src/components/icons.tsx +58 -0
package/runtime/src/components/locale-switcher.tsx +97 -0
package/runtime/src/components/mobile-docs-menu.tsx +208 -0
package/runtime/src/components/site-header.tsx +44 -0
package/runtime/src/components/site-search.tsx +358 -0
package/runtime/src/components/theme-toggle.tsx +74 -0
package/runtime/src/docs.config.ts +91 -0
package/runtime/src/framework/config.ts +76 -0
package/runtime/src/framework/errors.ts +34 -0
package/runtime/src/framework/locales.ts +45 -0
package/runtime/src/framework/markdown-search-text.ts +11 -0
package/runtime/src/framework/navigation.ts +58 -0
package/runtime/src/framework/next-config.ts +160 -0
package/runtime/src/framework/rendering.ts +445 -0
package/runtime/src/framework/repository.ts +255 -0
package/runtime/src/framework/runtime-locales.ts +85 -0
package/runtime/src/framework/search-index-types.ts +34 -0
package/runtime/src/framework/search-index.ts +271 -0
package/runtime/src/framework/service.ts +302 -0
package/runtime/src/framework/settings.ts +43 -0
package/runtime/src/framework/site-title.ts +54 -0
package/runtime/src/framework/theme.ts +17 -0
package/runtime/src/framework/types.ts +66 -0
package/runtime/src/framework/url.ts +78 -0
package/runtime/src/supatent/client.ts +2 -0
package/src/index.ts +11 -0
package/src/next-config.ts +5 -0
package/src/next.ts +10 -0

package/runtime/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { SiteHeader } from "../components/site-header";
+export const metadata: Metadata = {
+  title: "Supatent Docs Framework",
+  description: "SSR documentation framework powered by Supatent CMS",
+};
+const themeScript = `
+(() => {
+  try {
+    const stored = localStorage.getItem("docs-theme");
+    const system = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    const theme = stored === "dark" || stored === "light" ? stored : system;
+    document.documentElement.dataset.theme = theme;
+  } catch {
+    document.documentElement.dataset.theme = "light";
+  }
+})();
+`;
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>
+        <SiteHeader />
+        {children}
+      </body>
+    </html>
+  );
+}

package/runtime/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import { docsConfig } from "../docs.config";
+import { toDocsPagePath } from "../framework/url";
+export default function HomePage() {
+  const firstLocale = docsConfig.routing.defaultLocale;
+  const docsPath = toDocsPagePath(docsConfig, firstLocale);
+  return (
+    <main className="home-wrap">
+      <section className="home-card">
+        <h1>Supatent Docs Framework</h1>
+        <p>
+          Framework is configured. Start with{" "}
+          <a href={docsPath}>
+            <code>{docsPath}</code>
+          </a>
+          .
+        </p>
+        <p>
+          Required env var: <code>SUPATENT_PROJECT_SLUG</code>.{" "}
+          <code>SUPATENT_API_KEY</code> is required only in draft mode.
+        </p>
+      </section>
+    </main>
+  );
+}

package/runtime/src/components/code-group-enhancer.tsx ADDED Viewed

@@ -0,0 +1,128 @@
+"use client";
+import { useEffect } from "react";
+type CleanupFn = () => void;
+function parseIndex(value: string | null): number {
+  if (!value) {
+    return 0;
+  }
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+export function CodeGroupEnhancer() {
+  useEffect(() => {
+    const cleanups: CleanupFn[] = [];
+    const groups = Array.from(
+      document.querySelectorAll<HTMLElement>(".docs-code-group"),
+    );
+    for (const group of groups) {
+      const tabs = Array.from(
+        group.querySelectorAll<HTMLButtonElement>("[data-code-tab]"),
+      );
+      const panels = Array.from(
+        group.querySelectorAll<HTMLElement>("[data-code-panel]"),
+      );
+      if (tabs.length === 0 || panels.length === 0) {
+        continue;
+      }
+      const activateTab = (nextIndex: number, focus = false) => {
+        const clamped = Math.max(0, Math.min(nextIndex, tabs.length - 1));
+        tabs.forEach((tab, index) => {
+          const active = index === clamped;
+          tab.classList.toggle("docs-code-tab-active", active);
+          tab.setAttribute("aria-selected", active ? "true" : "false");
+          tab.tabIndex = active ? 0 : -1;
+          if (active && focus) {
+            tab.focus();
+          }
+        });
+        panels.forEach((panel, index) => {
+          panel.hidden = index !== clamped;
+        });
+      };
+      tabs.forEach((tab, index) => {
+        const onClick = () => activateTab(index);
+        tab.addEventListener("click", onClick);
+        cleanups.push(() => tab.removeEventListener("click", onClick));
+        const onKeyDown = (event: KeyboardEvent) => {
+          if (event.key === "ArrowRight") {
+            event.preventDefault();
+            activateTab((index + 1) % tabs.length, true);
+          } else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            activateTab((index - 1 + tabs.length) % tabs.length, true);
+          } else if (event.key === "Home") {
+            event.preventDefault();
+            activateTab(0, true);
+          } else if (event.key === "End") {
+            event.preventDefault();
+            activateTab(tabs.length - 1, true);
+          }
+        };
+        tab.addEventListener("keydown", onKeyDown);
+        cleanups.push(() => tab.removeEventListener("keydown", onKeyDown));
+      });
+      const copyButtons = Array.from(
+        group.querySelectorAll<HTMLButtonElement>("[data-code-copy]"),
+      );
+      copyButtons.forEach((button) => {
+        const onClick = async () => {
+          const panel = button.closest<HTMLElement>("[data-code-panel]");
+          if (!panel) {
+            return;
+          }
+          const code = panel.querySelector<HTMLElement>("pre code");
+          const text = code?.textContent?.replace(/\n$/, "") ?? "";
+          if (!text) {
+            return;
+          }
+          try {
+            await navigator.clipboard.writeText(text);
+          } catch {
+            return;
+          }
+          const copiedLabel = button.dataset.codeCopiedLabel ?? "Copied";
+          const copyLabel = button.dataset.codeCopyLabel ?? "Copy";
+          button.textContent = copiedLabel;
+          const timeoutId = window.setTimeout(() => {
+            button.textContent = copyLabel;
+          }, 1200);
+          cleanups.push(() => window.clearTimeout(timeoutId));
+        };
+        button.addEventListener("click", onClick);
+        cleanups.push(() => button.removeEventListener("click", onClick));
+      });
+      const selectedTab = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
+      activateTab(selectedTab >= 0 ? selectedTab : parseIndex(tabs[0].dataset.codeIndex ?? "0"));
+    }
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    };
+  }, []);
+  return null;
+}

package/runtime/src/components/docs-shell.tsx ADDED Viewed

@@ -0,0 +1,140 @@
+import type { DocsNavNode } from "../framework/types";
+import { MobileDocsMenu } from "./mobile-docs-menu";
+import { CodeGroupEnhancer } from "./code-group-enhancer";
+type DocsShellProps = {
+  pageHtml: string;
+  navigation: DocsNavNode[];
+  activeSlug: string;
+  locales: string[];
+  defaultLocale: string;
+  basePath: string;
+  tocItems: Array<{
+    id: string;
+    label: string;
+    depth: number;
+  }>;
+};
+function NavTree({ nodes, activeSlug }: { nodes: DocsNavNode[]; activeSlug: string }) {
+  return (
+    <ul className="docs-category-list">
+      {nodes.map((node) => {
+        const isCategory = node.path === null && node.children.length > 0;
+        if (isCategory) {
+          return (
+            <li key={node.id} className="docs-category">
+              <details open className="docs-category-details">
+                <summary className="docs-category-summary">
+                  <span className="docs-category-title">{node.title}</span>
+                  <span className="docs-category-chevron" aria-hidden="true">
+                    ▾
+                  </span>
+                </summary>
+                <ul className="docs-nav-tree">
+                  {node.children.map((child) => {
+                    const isChildActive = child.slug === activeSlug;
+                    return (
+                      <li key={child.id}>
+                        {child.path ? (
+                          <a
+                            href={child.path}
+                            className={
+                              isChildActive ? "docs-nav-link docs-nav-link-active" : "docs-nav-link"
+                            }
+                            aria-current={isChildActive ? "page" : undefined}
+                          >
+                            {child.title}
+                          </a>
+                        ) : null}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </details>
+            </li>
+          );
+        }
+        const isActive = node.slug === activeSlug;
+        return (
+          <li key={node.id}>
+            {node.path ? (
+              <a
+                href={node.path}
+                className={isActive ? "docs-nav-link docs-nav-link-active" : "docs-nav-link"}
+                aria-current={isActive ? "page" : undefined}
+              >
+                {node.title}
+              </a>
+            ) : (
+              <span className="docs-nav-group-label">{node.title}</span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+export function DocsShell({
+  pageHtml,
+  navigation,
+  activeSlug,
+  locales,
+  defaultLocale,
+  basePath,
+  tocItems,
+}: DocsShellProps) {
+  return (
+    <div className="docs-grid">
+      <aside className="docs-sidebar">
+        <NavTree nodes={navigation} activeSlug={activeSlug} />
+      </aside>
+      <main className="docs-main">
+        <CodeGroupEnhancer />
+        <header className="docs-main-header">
+          <MobileDocsMenu
+            navigation={navigation}
+            activeSlug={activeSlug}
+            tocItems={tocItems}
+            locales={locales}
+            defaultLocale={defaultLocale}
+            basePath={basePath}
+          />
+        </header>
+        {tocItems.length > 1 ? (
+          <nav className="docs-inline-toc">
+            <ul>
+              {tocItems.map((item) => (
+                <li key={item.id} className={item.depth > 2 ? "toc-nested" : undefined}>
+                  <a href={`#${item.id}`}>{item.label}</a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+        <article
+          id="overview"
+          className="docs-prose"
+          dangerouslySetInnerHTML={{ __html: pageHtml }}
+        />
+      </main>
+      <aside className="docs-toc">
+        <ul>
+          {tocItems.map((item) => (
+            <li key={item.id} className={item.depth > 2 ? "toc-nested" : undefined}>
+              <a href={`#${item.id}`}>{item.label}</a>
+            </li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+}

package/runtime/src/components/header-dropdown.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+"use client";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+type HeaderDropdownOption = {
+  value: string;
+  label: string;
+};
+type HeaderDropdownProps = {
+  ariaLabel: string;
+  value: string;
+  options: HeaderDropdownOption[];
+  leadingIcon: ReactNode;
+  onChange: (value: string) => void;
+  className?: string;
+};
+function ChevronDownIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.12l3.71-3.9a.75.75 0 0 1 1.08 1.04l-4.25 4.47a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export function HeaderDropdown({
+  ariaLabel,
+  value,
+  options,
+  leadingIcon,
+  onChange,
+  className,
+}: HeaderDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const selectedLabel = useMemo(
+    () => options.find((option) => option.value === value)?.label ?? value,
+    [options, value],
+  );
+  const listboxId = useMemo(
+    () => `header-dropdown-${ariaLabel.toLowerCase().replace(/\s+/g, "-")}`,
+    [ariaLabel],
+  );
+  useEffect(() => {
+    const onPointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+  return (
+    <div
+      className={
+        className
+          ? `select-wrap header-dropdown ${className}`
+          : "select-wrap header-dropdown"
+      }
+      ref={rootRef}
+    >
+      <button
+        type="button"
+        className="header-select-button"
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={listboxId}
+        onClick={() => setOpen((previous) => !previous)}
+      >
+        <span className="select-leading-icon" aria-hidden="true">
+          {leadingIcon}
+        </span>
+        <span className="header-select-value">{selectedLabel}</span>
+        <span
+          className={
+            open ? "select-trailing-icon select-trailing-icon-open" : "select-trailing-icon"
+          }
+          aria-hidden="true"
+        >
+          <ChevronDownIcon />
+        </span>
+      </button>
+      {open ? (
+        <div className="header-dropdown-panel">
+          <ul
+            id={listboxId}
+            role="listbox"
+            aria-label={ariaLabel}
+            className="header-dropdown-list"
+          >
+            {options.map((option) => (
+              <li key={option.value} role="presentation">
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={option.value === value}
+                  className={
+                    option.value === value
+                      ? "header-dropdown-item header-dropdown-item-active"
+                      : "header-dropdown-item"
+                  }
+                  onClick={() => {
+                    onChange(option.value);
+                    setOpen(false);
+                  }}
+                >
+                  {option.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/runtime/src/components/icons.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import type { SVGProps } from "react";
+type IconProps = SVGProps<SVGSVGElement>;
+export function MoonIcon(props: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path
+        fill="currentColor"
+        d="M12.058 20q-3.333 0-5.667-2.334T4.058 12q0-2.47 1.413-4.535q1.414-2.067 4.01-2.973q.306-.107.536-.056t.381.199t.192.38q.04.233-.063.489q-.194.477-.282.971T10.158 7.5q0 2.673 1.863 4.537q1.864 1.863 4.537 1.863q.698 0 1.277-.148q.58-.148.988-.24q.218-.04.399.01t.292.176q.115.125.156.308t-.047.417q-.715 2.45-2.803 4.013T12.058 20"
+      />
+    </svg>
+  );
+}
+export function SunIcon(props: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path
+        fill="currentColor"
+        d="M11.643 5.28q-.143-.145-.143-.357V2.539q0-.213.144-.357t.357-.144t.356.144t.143.356v2.385q0 .213-.144.356t-.357.144t-.356-.144m5 2.079q-.141-.14-.131-.342q.01-.2.15-.366l1.65-1.694q.15-.166.359-.166t.378.17q.155.156.155.35t-.16.354L17.35 7.358q-.16.16-.354.16t-.354-.16m2.435 5.142q-.213 0-.356-.144t-.144-.357t.144-.356t.356-.143h2.385q.212 0 .356.144t.143.357t-.143.356t-.357.143zm-7.434 9.318q-.143-.144-.143-.356v-2.366q0-.212.144-.356t.357-.144t.356.144t.143.356v2.366q0 .212-.144.356t-.357.144t-.356-.144M6.67 7.358l-1.713-1.67q-.165-.149-.165-.36t.165-.372q.16-.14.367-.14t.34.14l1.714 1.713q.14.134.14.341t-.136.348q-.15.14-.348.14t-.364-.14m11.662 11.686l-1.67-1.694q-.14-.165-.15-.366t.128-.342t.34-.14t.371.16l1.694 1.669q.146.14.143.344t-.149.37q-.16.164-.366.164t-.341-.165M2.539 12.5q-.213 0-.357-.144t-.143-.357t.143-.356t.357-.143h2.384q.213 0 .356.144t.144.357t-.144.356t-.356.143zm2.436 6.544q-.14-.16-.15-.363t.13-.344l1.676-1.675q.16-.16.35-.16t.358.155q.165.17.165.371t-.165.366l-1.65 1.65q-.166.166-.373.166t-.341-.166m3.487-3.501Q7 14.086 7 12.005T8.457 8.46T11.995 7t3.544 1.457T17 11.995t-1.457 3.544T12.005 17T8.46 15.543"
+      />
+    </svg>
+  );
+}
+export function LanguageIcon(props: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path
+        fill="currentColor"
+        d="M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12.013 2t3.875.788t3.175 2.15t2.15 3.175t.787 3.875t-.787 3.887t-2.15 3.188t-3.175 2.15t-3.875.787t-3.888-.787M12 19.95q.65-.9 1.125-1.875T13.9 16h-3.8q.3 1.1.775 2.075T12 19.95m-2.6-.4q-.45-.825-.787-1.713T8.05 16H5.1q.725 1.25 1.813 2.175T9.4 19.55m5.2 0q1.4-.45 2.488-1.375T18.9 16h-2.95q-.225.95-.562 1.838T14.6 19.55M4.25 14h3.4q-.075-.5-.112-.987T7.5 12t.038-1.012T7.65 10h-3.4q-.125.5-.187.988T4 12t.063 1.013t.187.987m5.4 0h4.7q.075-.5.113-.987T14.5 12t-.038-1.012T14.35 10h-4.7q-.075.5-.112.988T9.5 12t.038 1.013t.112.987m6.7 0h3.4q.125-.5.188-.987T20 12t-.062-1.012T19.75 10h-3.4q.075.5.113.988T16.5 12t-.038 1.013t-.112.987m-.4-6h2.95q-.725-1.25-1.812-2.175T14.6 4.45q.45.825.788 1.713T15.95 8M10.1 8h3.8q-.3-1.1-.775-2.075T12 4.05q-.65.9-1.125 1.875T10.1 8m-5 0h2.95q.225-.95.563-1.838T9.4 4.45Q8 4.9 6.912 5.825T5.1 8"
+      />
+    </svg>
+  );
+}
+export function MenuIcon(props: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path
+        fill="currentColor"
+        d="M4.75 6.5a.75.75 0 0 1 .75-.75h13a.75.75 0 1 1 0 1.5h-13a.75.75 0 0 1-.75-.75m0 5.5a.75.75 0 0 1 .75-.75h13a.75.75 0 1 1 0 1.5h-13a.75.75 0 0 1-.75-.75m.75 4.75a.75.75 0 1 0 0 1.5h13a.75.75 0 0 0 0-1.5z"
+      />
+    </svg>
+  );
+}
+export function CloseIcon(props: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path
+        fill="currentColor"
+        d="M6.47 6.47a.75.75 0 0 1 1.06 0L12 10.94l4.47-4.47a.75.75 0 0 1 1.06 1.06L13.06 12l4.47 4.47a.75.75 0 1 1-1.06 1.06L12 13.06l-4.47 4.47a.75.75 0 0 1-1.06-1.06L10.94 12L6.47 7.53a.75.75 0 0 1 0-1.06"
+      />
+    </svg>
+  );
+}

package/runtime/src/components/locale-switcher.tsx ADDED Viewed

@@ -0,0 +1,97 @@
+"use client";
+import { useMemo } from "react";
+import { usePathname } from "next/navigation";
+import { HeaderDropdown } from "./header-dropdown";
+import { LanguageIcon } from "./icons";
+type LocaleSwitcherProps = {
+  locales: string[];
+  defaultLocale: string;
+  basePath: string;
+  className?: string;
+};
+function isSupportedLocale(value: string, locales: string[]): boolean {
+  return locales.includes(value);
+}
+function normalizePath(pathname: string): string {
+  if (!pathname.startsWith("/")) {
+    return `/${pathname}`;
+  }
+  return pathname;
+}
+function toLocalePath(
+  pathname: string,
+  targetLocale: string,
+  locales: string[],
+  basePath: string,
+): string {
+  const normalized = normalizePath(pathname);
+  const segments = normalized.split("/").filter(Boolean);
+  if (segments.length > 0 && isSupportedLocale(segments[0], locales)) {
+    segments[0] = targetLocale;
+    return `/${segments.join("/")}`;
+  }
+  if (normalized === "/") {
+    return `/${targetLocale}${basePath}`;
+  }
+  return `/${targetLocale}${normalized}`;
+}
+function localeLabel(locale: string): string {
+  try {
+    const displayNames = new Intl.DisplayNames([locale], { type: "language" });
+    const languageCode = locale.split("-")[0];
+    return displayNames.of(languageCode) ?? locale;
+  } catch {
+    return locale;
+  }
+}
+export function LocaleSwitcher({
+  locales,
+  defaultLocale,
+  basePath,
+  className,
+}: LocaleSwitcherProps) {
+  const pathname = usePathname();
+  const currentLocale = useMemo(() => {
+    const first = pathname.split("/").filter(Boolean)[0];
+    if (isSupportedLocale(first, locales)) {
+      return first;
+    }
+    return defaultLocale;
+  }, [defaultLocale, locales, pathname]);
+  const options = useMemo(
+    () =>
+      locales.map((locale) => ({
+        value: locale,
+        label: localeLabel(locale),
+      })),
+    [locales],
+  );
+  return (
+    <HeaderDropdown
+      ariaLabel="Language"
+      leadingIcon={<LanguageIcon />}
+      value={currentLocale}
+      options={options}
+      className={className}
+      onChange={(nextLocale) => {
+        const nextPath = toLocalePath(pathname, nextLocale, locales, basePath);
+        window.location.assign(nextPath);
+      }}
+    />
+  );
+}