feat: start of perforamnce

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>