diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx index 622d6b7d..9b5168bc 100644 --- a/app/components/DocsLayout.tsx +++ b/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> diff --git a/app/components/DocsLogo.tsx b/app/components/DocsLogo.tsx index d011f4a6..8e261c2b 100644 --- a/app/components/DocsLogo.tsx +++ b/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> diff --git a/app/routes/__root.tsx b/app/routes/__root.tsx index b7629715..81c0d6c3 100644 --- a/app/routes/__root.tsx +++ b/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(), } }, diff --git a/app/routes/_libraries/route.tsx b/app/routes/_libraries/route.tsx index 32666906..aed7e71f 100644 --- a/app/routes/_libraries/route.tsx +++ b/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 /> diff --git a/package.json b/package.json index 7df3c392..dd0f9cf4 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 871157e5..d5fce397 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: '@tailwindcss/typography': specifier: ^0.5.13 version: 0.5.13(tailwindcss@3.4.1) + '@tanstack-dev/components': + specifier: ^1.4.0 + version: 1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@tanstack/pacer': specifier: ^0.2.0 version: 0.2.0 @@ -2884,6 +2887,12 @@ packages: peerDependencies: tailwindcss: '>=3.0.0 || insiders' + '@tanstack-dev/components@1.4.0': + resolution: {integrity: sha512-d+8NEzqfQpSRUVN8gcP9qBT/M6fOMerGux8pCV4Hmq2mHr+C9tJ3MwFFnP9xXh9LwPzXqKEU/2b/eDSMyunAUw==} + peerDependencies: + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + '@tanstack/directive-functions-plugin@1.106.0': resolution: {integrity: sha512-eAK+8tGl+ZZimROdnuHoAc1MVKvmQWh7WTQbh531607NQAuD/7TgbTAiSBfTJYW8qeGovrSp/qq+dnhjqTy3xQ==} engines: {node: '>=12'} @@ -10011,6 +10020,12 @@ snapshots: postcss-selector-parser: 6.0.10 tailwindcss: 3.4.1 + '@tanstack-dev/components@1.4.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + react-icons: 5.3.0(react@19.0.0) + '@tanstack/directive-functions-plugin@1.106.0(babel-plugin-macros@3.1.0)': dependencies: '@babel/code-frame': 7.26.2