feat: start of perforamnce

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

@@ -1,7 +1,11 @@
 import { assertSecret, idToRegion } from '@blitzkit/core';
 import { Button, Flex, Heading, Text } from '@radix-ui/themes';
 import { useEffect, useState } from 'react';
-import { useLocale } from '../../hooks/useLocale';
+import {
+  LocaleProvider,
+  useLocale,
+  type LocaleAcceptorProps,
+} from '../../hooks/useLocale';
 import { App } from '../../stores/app';
 import { CURRENT_POLICIES_AGREEMENT_INDEX } from '../../stores/app/constants';
 import { LinkI18n } from '../LinkI18n';
@@ -20,11 +24,13 @@ type Extension =
       status: 'error';
     };
 
-export function Checks() {
+export function Checks({ locale }: LocaleAcceptorProps) {
   return (
-    <App.Provider>
-      <Content />
-    </App.Provider>
+    <LocaleProvider locale={locale}>
+      <App.Provider>
+        <Content />
+      </App.Provider>
+    </LocaleProvider>
   );
 }
 

packages/website/src/components/HomePageHotTanks.tsx

@@ -4,7 +4,11 @@ import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { google } from 'googleapis';
 import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions';
 import { literals } from '../core/i18n/literals';
-import { LocaleProvider, useLocale } from '../hooks/useLocale';
+import {
+  LocaleProvider,
+  useLocale,
+  type LocaleAcceptorProps,
+} from '../hooks/useLocale';
 import { TankopediaPersistent } from '../stores/tankopediaPersistent';
 import { TankCard } from './TankCard';
 
@@ -65,11 +69,7 @@ const hotTanks = report.data.rows
     views,
   }));
 
-interface HomePageHotTanksProps {
-  locale: string | undefined;
-}
-
-export function HomePageHotTanks({ locale }: HomePageHotTanksProps) {
+export function HomePageHotTanks({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
       <TankopediaPersistent.Provider>

packages/website/src/components/LinkI18n.tsx

@@ -1,9 +1,8 @@
 import { Link, type LinkProps } from '@radix-ui/themes';
 import { getBestLocale } from '../core/i18n/getBestLocale';
+import type { LocaleAcceptorProps } from '../hooks/useLocale';
 
-type LinkI18nProps = LinkProps & {
-  locale: string | undefined;
-};
+type LinkI18nProps = LinkProps & LocaleAcceptorProps;
 
 export function LinkI18n({ locale, href, ...props }: LinkI18nProps) {
   const bestLocale = getBestLocale();

packages/website/src/components/Performance/PerformanceInfo.tsx

@@ -3,8 +3,9 @@ import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex } from '@radix-ui/themes';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { awaitableDiscoveredIdsDefinitions } from '../../core/awaitables/discoveredIdsDefinitions';
+import { literals } from '../../core/i18n/literals';
+import { useLocale } from '../../hooks/useLocale';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
-import { InlineSkeleton } from '../InlineSkeleton';
 
 const [discoveredIdsDefinitions, averageDefinitions] = await Promise.all([
   awaitableDiscoveredIdsDefinitions,
@@ -12,14 +13,21 @@ const [discoveredIdsDefinitions, averageDefinitions] = await Promise.all([
 ]);
 
 export function PerformanceInfo({ skeleton }: MaybeSkeletonComponentProps) {
-  const samples = formatCompact(Math.round(discoveredIdsDefinitions.count));
+  const { strings, locale } = useLocale();
+  const samples = formatCompact(
+    locale,
+    Math.round(discoveredIdsDefinitions.count),
+  );
   const minutesAgo = Math.floor(
     (Date.now() - averageDefinitions.time) / (1000 * 60),
   );
   const hoursAgo = Math.floor(minutesAgo / 60);
-  const timeAgo = `${hoursAgo === 0 ? minutesAgo : hoursAgo} ${
-    hoursAgo === 0 ? 'minutes' : 'hours'
-  }`;
+  const timeAgo = literals(
+    strings.website.tools.performance.estimation[
+      hoursAgo === 0 ? 'minutes' : 'hours'
+    ],
+    [`${hoursAgo === 0 ? minutesAgo : hoursAgo}`],
+  );
 
   return (
     <Flex justify="center">
@@ -28,9 +36,14 @@ export function PerformanceInfo({ skeleton }: MaybeSkeletonComponentProps) {
           <InfoCircledIcon />
         </Callout.Icon>
         <Callout.Text>
-          Estimated stats based on{' '}
+          {/* Estimated stats based on{' '}
           {skeleton ? <InlineSkeleton width="2rem" /> : samples} players.
-          Updated {skeleton ? <InlineSkeleton width="3rem" /> : timeAgo} ago.
+          Updated {skeleton ? <InlineSkeleton width="3rem" /> : timeAgo} ago. */}
+
+          {literals(strings.website.tools.performance.estimation.body, [
+            samples,
+            timeAgo,
+          ])}
         </Callout.Text>
       </Callout.Root>
     </Flex>