feat: localize tank search

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

@@ -1,4 +1,5 @@
 import { Flex, Link, Text } from '@radix-ui/themes';
+import { useLocale } from '../../../hooks/useLocale';
 import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
 
 interface NoResultsProps {
@@ -6,10 +7,12 @@ interface NoResultsProps {
 }
 
 export function NoResults({ type = 'filters' }: NoResultsProps) {
+  const { strings } = useLocale();
+
   return (
     <Flex flexGrow="1" align="center" justify="center">
       <Text color="gray">
-        No tanks found.{' '}
+        {strings.website.common.tank_search.no_tanks_found.body}.{' '}
         <Link
           href="#"
           underline="always"
@@ -18,7 +21,9 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
             $tankFilters.set(initialTankFilters);
           }}
         >
-          {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
+          {type === 'filters'
+            ? strings.website.common.tank_search.no_tanks_found.clear_filters
+            : strings.website.common.tank_search.no_tanks_found.search_again}
         </Link>
         .
       </Text>

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

@@ -3,6 +3,7 @@ import { Flex, Separator, Text } from '@radix-ui/themes';
 import { isEqual } from 'lodash-es';
 import { useMemo } from 'react';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { useLocale } from '../../../hooks/useLocale';
 import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
 import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
 import { $tankopediaSort } from '../../../stores/tankopediaSort';
@@ -27,6 +28,7 @@ export function RecentlyViewed() {
       }),
     [filters],
   );
+  const { strings } = useLocale();
 
   if (recentlyViewed.length === 0 || sort.by !== 'meta.none' || hasFilters) {
     return null;
@@ -35,7 +37,7 @@ export function RecentlyViewed() {
   return (
     <Flex direction="column" gap="2" mt="2" mb="6">
       <Text color="gray" align="center">
-        Recently viewed
+        {strings.website.common.tank_search.recent}
       </Text>
       <TankCardWrapper>
         {recentlyViewed.map((id) => (