feat: translate tank search

packages/website/src/pages/[...locale]/tools/compare/_index.tsx

@@ -1,5 +1,4 @@
 import { createDefaultSkills } from '@blitzkit/core';
-import { PlusIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, Text } from '@radix-ui/themes';
 import { useEffect, useMemo, useState } from 'react';
 import { CompareTable } from '../../../../components/Compare/CompareTable';
@@ -13,6 +12,11 @@ import { awaitableSkillDefinitions } from '../../../../core/awaitables/skillDefi
 import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
 import { tankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
 import { tankToCompareMember } from '../../../../core/blitzkit/tankToCompareMember';
+import {
+  LocaleProvider,
+  useLocale,
+  type LocaleAcceptorProps,
+} from '../../../../hooks/useLocale';
 import { App } from '../../../../stores/app';
 import { CompareEphemeral } from '../../../../stores/compareEphemeral';
 import { ComparePersistent } from '../../../../stores/comparePersistent';
@@ -32,19 +36,21 @@ const [
   awaitableTankDefinitions,
 ]);
 
-export function Page() {
+export function Page({ locale }: LocaleAcceptorProps) {
   return (
-    <App.Provider>
-      <TankopediaPersistent.Provider>
-        <ComparePersistent.Provider>
-          <CompareEphemeral.Provider
-            data={createDefaultSkills(skillDefinitions)}
-          >
-            <Content />
-          </CompareEphemeral.Provider>
-        </ComparePersistent.Provider>
-      </TankopediaPersistent.Provider>
-    </App.Provider>
+    <LocaleProvider locale={locale}>
+      <App.Provider>
+        <TankopediaPersistent.Provider>
+          <ComparePersistent.Provider>
+            <CompareEphemeral.Provider
+              data={createDefaultSkills(skillDefinitions)}
+            >
+              <Content />
+            </CompareEphemeral.Provider>
+          </ComparePersistent.Provider>
+        </TankopediaPersistent.Provider>
+      </App.Provider>
+    </LocaleProvider>
   );
 }
 
@@ -52,6 +58,7 @@ function Content() {
   const members = CompareEphemeral.use((state) => state.members);
   const [addTankDialogOpen, setAddTankDialogOpen] = useState(false);
   const crewSkills = CompareEphemeral.use((state) => state.crewSkills);
+  const { strings } = useLocale();
   const stats = useMemo<ReturnType<typeof tankCharacteristics>[]>(
     () =>
       members.map((thisMember) =>
@@ -136,19 +143,6 @@ function Content() {
       {members.length > 0 && (
         <Flex justify="center" flexGrow="1" position="relative">
           <CompareTable stats={stats} />
-
-          {/* <IconButton
-            style={{
-              position: 'absolute',
-              right: 0,
-              top: 73,
-              transform: 'translate(50%, -50%)',
-              zIndex: 1,
-            }}
-            onClick={() => setAddTankDialogOpen(true)}
-          >
-            <PlusIcon />
-          </IconButton> */}
         </Flex>
       )}
 
@@ -159,9 +153,11 @@ function Content() {
           direction="column"
           style={{ flex: 1 }}
         >
-          <Heading color="gray">No tanks selected</Heading>
+          <Heading color="gray">
+            {strings.website.tools.compare.no_tanks.title}
+          </Heading>
           <Text color="gray">
-            Press the <PlusIcon /> Add button to get started
+            {strings.website.tools.compare.no_tanks.body}
           </Text>
         </Flex>
       )}

packages/website/src/pages/[...locale]/tools/compare/index.astro

@@ -5,10 +5,12 @@ import BaseLayout from '../../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
 
 export { getStaticPaths } from '../../index.astro';
+
+const { locale } = Astro.params;
 ---
 
 <ToolOpenGraph tool={compareTool} />
 
 <BaseLayout noFooter>
-  <Page client:load />
+  <Page {locale} client:load />
 </BaseLayout>