i18n

src/features/tournaments/components/tournament-stats.tsx

@@ -18,12 +18,14 @@ import TeamAvatar from "@/components/team-avatar";
 import ListLink from "@/components/list-link";
 import { isTournamentPredictable } from "@/features/predictions/utils";
 import { Podium } from "./podium";
+import { Trans, useLingui } from "@lingui/react/macro";
 
 interface TournamentStatsProps {
   tournament: Tournament;
 }
 
 export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
+  const { t } = useLingui();
 
   const matches = tournament.matches || [];
   const nonByeMatches = useMemo(() =>
@@ -62,7 +64,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
         <Box p="md">
           <Center>
             <Text c="dimmed" size="sm">
-              No stats available yet
+              <Trans>No stats available yet</Trans>
             </Text>
           </Center>
         </Box>
@@ -71,8 +73,8 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
 
     return (
       <Stack gap={0}>
-        <Text px="md" size="lg" fw={600}>Results</Text>
-        <Text px="md" c="dimmed" size="xs" fw={500}>Sorted by win percentage</Text>
+        <Text px="md" size="lg" fw={600}><Trans>Results</Trans></Text>
+        <Text px="md" c="dimmed" size="xs" fw={500}><Trans>Sorted by win percentage</Trans></Text>
         {teamStatsWithCalculations.map((stat, index) => {
           const team = tournament.teams?.find(t => t.id === stat.team_id);
 
@@ -107,7 +109,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                       <Group gap="md" ta="center">
                         <Stack gap={0}>
                           <Text size="xs" c="dimmed" fw={700}>
-                            W
+                            <Trans>W</Trans>
                           </Text>
                           <Text size="xs" c="dimmed">
                             {stat.wins}
@@ -115,7 +117,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                         </Stack>
                         <Stack gap={0}>
                           <Text size="xs" c="dimmed" fw={700}>
-                            L
+                            <Trans>L</Trans>
                           </Text>
                           <Text size="xs" c="dimmed">
                             {stat.losses}
@@ -123,7 +125,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                         </Stack>
                         <Stack gap={0}>
                           <Text size="xs" c="dimmed" fw={700}>
-                            W%
+                            <Trans>W%</Trans>
                           </Text>
                           <Text size="xs" c="dimmed">
                             {stat.winPercentage.toFixed(1)}%
@@ -131,7 +133,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                         </Stack>
                         <Stack gap={0}>
                           <Text size="xs" c="dimmed" fw={700}>
-                            AVG
+                            <Trans>AVG</Trans>
                           </Text>
                           <Text size="xs" c="dimmed">
                             {stat.avgCupsPerMatch.toFixed(1)}
@@ -139,7 +141,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                         </Stack>
                         <Stack gap={0}>
                           <Text size="xs" c="dimmed" fw={700}>
-                            CF
+                            <Trans>CF</Trans>
                           </Text>
                           <Text size="xs" c="dimmed">
                             {stat.total_cups_made}
@@ -147,7 +149,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
                         </Stack>
                         <Stack gap={0}>
                           <Text size="xs" c="dimmed" fw={700}>
-                            CA
+                            <Trans>CA</Trans>
                           </Text>
                           <Text size="xs" c="dimmed">
                             {stat.total_cups_against}
@@ -170,27 +172,27 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
     <Container size="100%" px={0}>
       <Stack gap="md">
         {tournament.regional && !hasGroupStage && (
-          <Alert px="md" variant="light" title="Regional Tournament" icon={<InfoIcon size={16} />}>
-            Earlier regional formats aren't supported in the app and order of matches or displayed winners may be unreliable.
+          <Alert px="md" variant="light" title={t`Regional Tournament`} icon={<InfoIcon size={16} />}>
+            <Trans>Earlier regional formats aren't supported in the app and order of matches or displayed winners may be unreliable.</Trans>
           </Alert>
         )}
         {!tournament.regional && <Podium tournament={tournament} />}
         <Stack gap={0}>
           {hasGroupStage && (
             <ListLink
-              label={`View Groups`}
+              label={t`View Groups`}
               to={`/tournaments/${tournament.id}/groups`}
               Icon={ListDashes}
             />
           )}
           <ListLink
-            label={`View Bracket`}
+            label={t`View Bracket`}
             to={`/tournaments/${tournament.id}/bracket`}
             Icon={TreeStructureIcon}
           />
           {isTournamentPredictable(tournament) && (
             <ListLink
-              label={`View Predictions`}
+              label={t`View Predictions`}
               to={`/tournaments/${tournament.id}/predictions`}
               Icon={WizardOrbIcon}
             />