feat: localize tankopedia reviews

packages/i18n/strings/en.json

@@ -931,6 +931,16 @@
           "battle": "1 battle",
           "battles": "%s1 battles",
           "route": "Route %s1 of %s2"
+        },
+
+        "game_modes": {
+          "title": "Game mode abilities"
+        },
+
+        "review": {
+          "title": "Review videos",
+          "disclaimer": "BlitzKit does not endorse any review videos.",
+          "join": "Apply to %s1 YouTuber program"
         }
       },
       "compare": {

packages/website/src/components/Tankopedia/GameModeSection.tsx

@@ -14,7 +14,7 @@ const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
   ]);
 
 export function GameModeSection() {
-  const { unwrap } = useLocale();
+  const { unwrap, strings } = useLocale();
   const tank = Duel.use((state) => state.protagonist.tank);
   const roles = Object.entries(tank.roles);
 
@@ -22,7 +22,9 @@ export function GameModeSection() {
 
   return (
     <Flex direction="column" gap="4" align="center">
-      <Heading size="6">Game mode abilities</Heading>
+      <Heading size="6">
+        {strings.website.tools.tankopedia.game_modes.title}
+      </Heading>
 
       <Flex justify="center" gap="4" wrap="wrap" px="4">
         {roles.map(([key, value]) => {

packages/website/src/components/Tankopedia/VideoSection.tsx

@@ -1,7 +1,9 @@
 import { youtubers } from '@blitzkit/core';
 import { Box, Flex, Heading, Link, Skeleton, Text } from '@radix-ui/themes';
 import { awaitableReviews } from '../../core/awaitables/reviews';
+import { literals } from '../../core/i18n/literals';
 import { Var } from '../../core/radix/var';
+import { useLocale } from '../../hooks/useLocale';
 import { Duel } from '../../stores/duel';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { PageWrapper } from '../PageWrapper';
@@ -12,6 +14,7 @@ const reviews = await awaitableReviews;
 export function VideoSection({ skeleton }: MaybeSkeletonComponentProps) {
   const tank = Duel.use((state) => state.protagonist.tank);
   const videos = reviews.reviews[tank.id]?.videos;
+  const { strings } = useLocale();
 
   if (!videos) return null;
 
@@ -19,9 +22,13 @@ export function VideoSection({ skeleton }: MaybeSkeletonComponentProps) {
     <PageWrapper noFlex1 noMinHeight>
       <Flex direction="column" gap="6" align="center">
         <Flex direction="column" align="center">
-          <Heading size="6">Review videos</Heading>
+          <Heading size="6">
+            {strings.website.tools.tankopedia.review.title}
+          </Heading>
 
-          <Text color="gray">BlitzKit does not endorse any review videos.</Text>
+          <Text color="gray">
+            {strings.website.tools.tankopedia.review.disclaimer}
+          </Text>
         </Flex>
 
         <Flex gap="3" wrap="wrap" justify="center">
@@ -110,7 +117,9 @@ export function VideoSection({ skeleton }: MaybeSkeletonComponentProps) {
                   width: '9rem',
                 }}
               >
-                Apply to BlitzKit YouTuber program
+                {literals(strings.website.tools.tankopedia.review.join, [
+                  'BlitzKit',
+                ])}
               </Text>
             </Flex>
           </Link>