feat: some more localized links

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx

@@ -17,11 +17,12 @@ import {
   Flex,
   Heading,
   IconButton,
-  Link,
   Text,
 } from '@radix-ui/themes';
 import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
+import { useLocale } from '../../../../hooks/useLocale';
 import { Duel } from '../../../../stores/duel';
+import { LinkI18n } from '../../../LinkI18n';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 type ModuleDefinition =
@@ -63,6 +64,8 @@ function ModuleButton({
   onClick: () => void;
 }) {
   const isTank = unlock.type === ModuleType.VEHICLE;
+  const { locale } = useLocale();
+
   const button = (
     <IconButton
       size="4"
@@ -132,7 +135,9 @@ function ModuleButton({
   );
 
   return isTank ? (
-    <Link href={`/tools/tankopedia/${unlock.id}`}>{button}</Link>
+    <LinkI18n locale={locale} href={`/tools/tankopedia/${unlock.id}`}>
+      {button}
+    </LinkI18n>
   ) : (
     button
   );

packages/website/src/components/Tankopedia/MetaSection/index.tsx

@@ -12,10 +12,12 @@ import { useState } from 'react';
 import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../../core/awaitables/provisionDefinitions';
 import { tankToDuelMember } from '../../../core/blitzkit/tankToDuelMember';
+import { useLocale } from '../../../hooks/useLocale';
 import { App } from '../../../stores/app';
 import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import { classIcons } from '../../ClassIcon';
+import { LinkI18n } from '../../LinkI18n';
 import { ScienceIcon } from '../../ScienceIcon';
 import { TankSearch } from '../../TankSearch';
 import { Listing } from './components/Listing';
@@ -37,24 +39,28 @@ export function MetaSection() {
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const [showSwapDialog, setShowSwapDialog] = useState(false);
+  const { locale } = useLocale();
 
   return (
     <Flex justify="center" align="center">
       <Flex direction="column" align="center" gap="6">
         <Flex gap="2" wrap="wrap" justify="center" align="center">
-          <Link href="/tools/tankopedia">
+          <LinkI18n locale={locale} href="/tools/tankopedia">
             <Button variant="outline">
               <ChevronLeftIcon />
               Back
             </Button>
-          </Link>
+          </LinkI18n>
 
-          <Link href={`/tools/compare?tanks=${compareTanks.join('%2C')}`}>
+          <LinkI18n
+            locale={locale}
+            href={`/tools/compare?tanks=${compareTanks.join('%2C')}`}
+          >
             <Button variant="outline">
               <MixIcon />
               Compare
             </Button>
-          </Link>
+          </LinkI18n>
 
           {assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' && (
             <Link

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -1,9 +1,11 @@
 import { asset, formatCompact, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
-import { Box, Flex, Link, Skeleton, Text } from '@radix-ui/themes';
+import { Box, Flex, Skeleton, Text } from '@radix-ui/themes';
 import { awaitableAverageDefinitions } from '../../../../core/awaitables/averageDefinitions';
 import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
+import { useLocale } from '../../../../hooks/useLocale';
 import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
 import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
+import { LinkI18n } from '../../../LinkI18n';
 
 type NodeProps = MaybeSkeletonComponentProps & {
   id: number;
@@ -17,6 +19,7 @@ const [tankDefinitions, averageDefinitions] = await Promise.all([
 ]);
 
 export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
+  const { locale } = useLocale();
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
   const tank = tankDefinitions.tanks[id];
   const nextTanks = nextIds?.map((id) => tankDefinitions.tanks[id]);
@@ -40,7 +43,8 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
     averages && nextTanks ? Math.round(nextTanksXp! / averageXp!) : undefined;
 
   return (
-    <Link
+    <LinkI18n
+      locale={locale}
       href={`/tools/tankopedia/${id}`}
       key={id}
       style={{
@@ -135,6 +139,6 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
           </Flex>
         </Flex>
       </Box>
-    </Link>
+    </LinkI18n>
   );
 }