Add i18n toggle button (en & zh-hans)

app/components/DocsLayout.tsx

@@ -518,14 +518,7 @@ export function DocsLayout({
 
   const largeMenu = (
     <div className="bg-white/50 dark:bg-black/30 shadow-xl max-w-[300px] xl:max-w-[350px] 2xl:max-w-[400px] hidden lg:flex flex-col gap-4 h-screen sticky top-0 z-20 dark:border-r border-gray-500/20 transition-all duration-500">
-      <div
-        className="px-4 pt-4 flex gap-2 items-center text-2xl"
-        style={{
-          viewTransitionName: `library-name`,
-        }}
-      >
-        {logo}
-      </div>
+      <div className="px-4 pt-4 flex gap-2 items-center text-2xl">{logo}</div>
       <div className="px-4">
         <SearchButton />
       </div>

app/components/DocsLogo.tsx

@@ -1,5 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import { ThemeToggle } from './ThemeToggle'
+import { I18nToggle } from '@tanstack-dev/components'
 
 type Props = {
   name: string
@@ -31,6 +32,7 @@ export const DocsLogo = ({
         <span className={`${gradientText}`}>{name}</span>{' '}
         <span className="text-sm align-super">{version}</span>
       </Link>
+      <I18nToggle />
       <div className="ml-auto">
         <ThemeToggle />
       </div>

app/routes/__root.tsx

@@ -24,11 +24,12 @@ import { GoogleScripts } from '~/components/GoogleScripts'
 import { BackgroundAnimation } from '~/components/BackgroundAnimation'
 import { SearchProvider } from '~/contexts/SearchContext'
 import { SearchModal } from '~/components/SearchModal'
+import { getI18nLinks } from '@tanstack-dev/components';
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
 }>()({
-  head: () => ({
+  head: (ctx) => ({
     meta: [
       {
         charSet: 'utf-8',
@@ -81,6 +82,9 @@ export const Route = createRootRouteWithContext<{
         rel: 'stylesheet',
         href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
+      ...getI18nLinks({
+        href: ctx.loaderData.href,
+      }),
     ],
     scripts: [
       // Google Tag Manager script
@@ -108,8 +112,9 @@ export const Route = createRootRouteWithContext<{
     }
   },
   staleTime: Infinity,
-  loader: async () => {
+  loader: async ({location}) => {
     return {
+      href: location.href,
       themeCookie: await getThemeCookie(),
     }
   },

app/routes/_libraries/route.tsx

@@ -18,6 +18,7 @@ import { ThemeToggle, useThemeStore } from '~/components/ThemeToggle'
 import { TbBrandBluesky, TbBrandTwitter } from 'react-icons/tb'
 import { BiSolidCheckShield } from 'react-icons/bi'
 import { SearchButton } from '~/components/SearchButton'
+import {I18nToggle} from '@tanstack-dev/components'
 
 export const Route = createFileRoute('/_libraries')({
   staleTime: Infinity,
@@ -37,6 +38,7 @@ function LibrariesLayout() {
       })
     },
   })
+  const href = useLocation().href;
 
   const detailsRef = React.useRef<HTMLElement>(null!)
   const linkClasses = `flex items-center justify-between group px-2 py-1 rounded-lg hover:bg-gray-500 hover:bg-opacity-10 font-black`
@@ -225,7 +227,7 @@ function LibrariesLayout() {
   )
 
   const logo = (
-    <div className="flex-1 flex items-center gap-4 justify-between">
+    <div className="flex-1 flex items-center gap-2 justify-between">
       <Link to="/" className={twMerge(`flex items-center gap-1.5`)}>
         <img
           src={logoColor100w}
@@ -253,6 +255,7 @@ function LibrariesLayout() {
         >
           <FaInstagram className="text-xl" />
         </a>
+        <I18nToggle href={href}/>
       </div>
       <div className="ml-auto">
         <ThemeToggle />

package.json

@@ -32,6 +32,7 @@
     "@sentry/react": "^8.35.0",
     "@sentry/vite-plugin": "^2.22.6",
     "@tailwindcss/typography": "^0.5.13",
+    "@tanstack-dev/components": "^1.4.0",
     "@tanstack/pacer": "^0.2.0",
     "@tanstack/react-pacer": "^0.2.0",
     "@tanstack/react-query": "^5.66.0",