feat: localize tankopedia tech tree

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

@@ -3,6 +3,7 @@ import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { literals } from '../../../core/i18n/literals';
 import { useLocale } from '../../../hooks/useLocale';
 import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
@@ -17,7 +18,7 @@ const tankDefinitions = await awaitableTankDefinitions;
 export const XP_MULTIPLIERS = [1, 2, 3, 4, 5, 10];
 
 export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
-  const { locale } = useLocale();
+  const { locale, strings } = useLocale();
   const master = Duel.use((state) => state.protagonist.tank);
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
@@ -91,7 +92,9 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
       py="6"
     >
       <Flex direction="column" align="center">
-        <Heading size="6">Tech tree</Heading>
+        <Heading size="6">
+          {strings.website.tools.tankopedia.tech_tree.title}
+        </Heading>
 
         {master.tier > 1 && (
           <Flex gap="4" align="center">
@@ -156,7 +159,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
                 pl="1"
               >
                 <Text size="2">
-                  x<b>{multiplier}</b>
+                  {literals(strings.common.units.x, [`${multiplier}`])}
                 </Text>
               </Flex>
             );
@@ -216,7 +219,10 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
               <CaretLeftIcon />
             </IconButton>
             <Text>
-              Route {lineIndex + 1} of {lines.length}
+              {literals(strings.website.tools.tankopedia.tech_tree.route, [
+                `${lineIndex + 1}`,
+                `${lines.length}`,
+              ])}
             </Text>
             <IconButton
               size="2"