feat: translate tank search

packages/website/src/components/TankSearch/index.tsx

@@ -16,12 +16,11 @@ import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions'
 import { awaitableTankNames } from '../../core/awaitables/tankNames';
 import { filterTank } from '../../core/blitzkit/filterTank';
 import { resolveReload } from '../../core/blitzkit/resolveReload';
+import { literals } from '../../core/i18n/literals';
+import { useLocale } from '../../hooks/useLocale';
 import { $tankFilters } from '../../stores/tankFilters';
 import { TankopediaPersistent } from '../../stores/tankopediaPersistent';
-import {
-  SORT_NAMES,
-  SORT_UNITS,
-} from '../../stores/tankopediaPersistent/constants';
+import { SORT_UNITS } from '../../stores/tankopediaPersistent/constants';
 import { $tankopediaSort } from '../../stores/tankopediaSort';
 import { ExperimentIcon } from '../ExperimentIcon';
 import { TankSearchCard } from './components/Card';
@@ -52,6 +51,7 @@ const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
 
 export const TankSearch = memo<TankSearchProps>(
   ({ compact, onSelect, onSelectAll, ...props }) => {
+    const { strings, locale } = useLocale();
     const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
     const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
     const tankFilters = useStore($tankFilters);
@@ -438,8 +438,11 @@ export const TankSearch = memo<TankSearchProps>(
         <Flex mt="2" gap="1" align="center" justify="center" direction="column">
           <Flex gap="2">
             <Text color="gray">
-              {tanksFiltered.length} tank
-              {tanksFiltered.length === 1 ? '' : 's'}
+              {tanksFiltered.length === 1
+                ? strings.website.common.tank_search.count_singular
+                : literals(strings.website.common.tank_search.count_plural, [
+                    `${tanksFiltered.length.toLocaleString(locale)}`,
+                  ])}
             </Text>
 
             {onSelectAll && (
@@ -457,14 +460,16 @@ export const TankSearch = memo<TankSearchProps>(
                   });
                 }}
               >
-                Select all
+                {strings.website.common.tank_search.select_all}
               </Link>
             )}
           </Flex>
 
           {tankopediaSort.by !== 'meta.none' && (
             <Text color="gray">
-              Sorting by {SORT_NAMES[tankopediaSort.by]}
+              {literals(strings.website.common.tank_search.sorting_by, [
+                strings.website.common.tank_search.sort[tankopediaSort.by],
+              ])}
               {SORT_UNITS[tankopediaSort.by] === undefined
                 ? ''
                 : ` (${SORT_UNITS[tankopediaSort.by]})`}
@@ -480,8 +485,7 @@ export const TankSearch = memo<TankSearchProps>(
                 <ExperimentIcon style={{ width: '1em', height: '1em' }} />
               </Callout.Icon>
               <Callout.Text>
-                Tanks in testing are subject to change and may not represent the
-                final product.
+                {strings.website.common.warnings.test}
               </Callout.Text>
             </Callout.Root>
           </Flex>