i18n

src/features/matches/components/match-card.tsx

@@ -9,6 +9,7 @@ import { useSheet } from "@/hooks/use-sheet";
 import Sheet from "@/components/sheet/sheet";
 import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
 import AnimatedScore from "./animated-score";
+import { Trans, useLingui } from "@lingui/react/macro";
 
 interface MatchCardProps {
   match: Match;
@@ -18,6 +19,7 @@ interface MatchCardProps {
 const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
   const navigate = useNavigate();
   const h2hSheet = useSheet();
+  const { t } = useLingui();
   const isHomeWin = match.home_cups > match.away_cups;
   const isAwayWin = match.away_cups > match.home_cups;
   const isStarted = match.status === "started";
@@ -71,19 +73,19 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
                   <>
                     <Text c="dimmed">-</Text>
                     <Text size="xs" c="dimmed">
-                      Round {match.round + 1}
-                      {match.is_losers_bracket && " (Losers)"}
+                      <Trans>Round {match.round + 1}</Trans>
+                      {match.is_losers_bracket && <Trans> (Losers)</Trans>}
                     </Text>
                   </>
                 )}
               </Group>
               {match.home && match.away && !hideH2H && !hasPrivate && (
-                <Tooltip label="Head to Head" withArrow position="left">
+                <Tooltip label={t`Head to Head`} withArrow position="left">
                   <ActionIcon
                     variant="subtle"
                     size="sm"
                     onClick={handleH2HClick}
-                    aria-label="View head-to-head"
+                    aria-label={t`View head-to-head`}
                     w={40}
                   >
                     <Group style={{ position: 'relative', width: 27.5, height: 16 }}>
@@ -226,7 +228,7 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
 
       {match.home && match.away && !hideH2H && h2hSheet.isOpen && (
         <Sheet
-          title="Head to Head"
+          title={t`Head to Head`}
           {...h2hSheet.props}
         >
           <TeamHeadToHeadSheet team1={match.home} team2={match.away} isOpen={h2hSheet.props.opened} />

src/features/matches/components/match-list.tsx

@@ -2,6 +2,7 @@ import { Stack, Text } from "@mantine/core";
 import { useMemo } from "react";
 import { Match } from "../types";
 import MatchCard from "./match-card";
+import { Trans } from "@lingui/react/macro";
 
 interface MatchListProps {
   matches: Match[];
@@ -29,7 +30,7 @@ const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
     <Stack p="md" gap="sm">
       {isRegional && (
         <Text size="xs" c="dimmed" ta="center" px="md">
-          Matches for regionals are unordered
+          <Trans>Matches for regionals are unordered</Trans>
         </Text>
       )}
       {filteredMatches.map((match, index) => (

src/features/matches/components/team-head-to-head-sheet.tsx

@@ -5,6 +5,7 @@ import { useMemo, useEffect, useState, Suspense } from "react";
 import { CrownIcon } from "@phosphor-icons/react";
 import MatchList from "./match-list";
 import TeamHeadToHeadSkeleton from "./team-head-to-head-skeleton";
+import { Trans, Plural } from "@lingui/react/macro";
 
 interface TeamHeadToHeadSheetProps {
   team1: TeamInfo;
@@ -87,7 +88,7 @@ const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSh
   if (isLoading) {
     return (
       <Stack p="md" gap="md">
-        <Text size="sm" c="dimmed" ta="center">Loading...</Text>
+        <Text size="sm" c="dimmed" ta="center"><Trans>Loading...</Trans></Text>
       </Stack>
     );
   }
@@ -96,7 +97,7 @@ const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSh
     return (
       <Stack p="md" gap="md">
         <Text size="sm" c="dimmed" ta="center">
-          These teams have not faced each other yet.
+          <Trans>These teams have not faced each other yet.</Trans>
         </Text>
       </Stack>
     );
@@ -111,7 +112,7 @@ const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSh
         <Stack gap="sm">
           <Group justify="center" gap="xs">
             <Text size="lg" fw={700}>{team1.name}</Text>
-            <Text size="sm" c="dimmed">vs</Text>
+            <Text size="sm" c="dimmed"><Trans>vs</Trans></Text>
             <Text size="lg" fw={700}>{team2.name}</Text>
           </Group>
 
@@ -131,32 +132,32 @@ const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSh
             <Group justify="center" gap="xs">
               <CrownIcon size={16} weight="fill" color="gold" />
               <Text size="xs" c="dimmed">
-                {leader.name} leads the series
+                <Trans>{leader.name} leads the series</Trans>
               </Text>
             </Group>
           )}
 
           {!leader && totalMatches > 0 && (
             <Text size="xs" c="dimmed" ta="center">
-              Series is tied
+              <Trans>Series is tied</Trans>
             </Text>
           )}
         </Stack>
       </Paper>
 
       <Stack gap={0}>
-        <Text size="sm" fw={600} px="md" mb="xs">Stats Comparison</Text>
+        <Text size="sm" fw={600} px="md" mb="xs"><Trans>Stats Comparison</Trans></Text>
 
         <Paper withBorder>
           <Stack gap={0}>
             <Group justify="space-between" px="md" py="sm">
               <Group gap="xs">
                 <Text size="sm" fw={600}>{stats.team1CupsFor}</Text>
-                <Text size="xs" c="dimmed">cups</Text>
+                <Text size="xs" c="dimmed"><Trans>cups</Trans></Text>
               </Group>
-              <Text size="xs" fw={500}>Total Cups</Text>
+              <Text size="xs" fw={500}><Trans>Total Cups</Trans></Text>
               <Group gap="xs">
-                <Text size="xs" c="dimmed">cups</Text>
+                <Text size="xs" c="dimmed"><Trans>cups</Trans></Text>
                 <Text size="sm" fw={600}>{stats.team2CupsFor}</Text>
               </Group>
             </Group>
@@ -167,11 +168,11 @@ const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSh
                 <Text size="sm" fw={600}>
                   {totalMatches > 0 ? (stats.team1CupsFor / totalMatches).toFixed(1) : '0.0'}
                 </Text>
-                <Text size="xs" c="dimmed">avg</Text>
+                <Text size="xs" c="dimmed"><Trans>avg</Trans></Text>
               </Group>
-              <Text size="xs" fw={500}>Avg Cups/Match</Text>
+              <Text size="xs" fw={500}><Trans>Avg Cups/Match</Trans></Text>
               <Group gap="xs">
-                <Text size="xs" c="dimmed">avg</Text>
+                <Text size="xs" c="dimmed"><Trans>avg</Trans></Text>
                 <Text size="sm" fw={600}>
                   {totalMatches > 0 ? (stats.team2CupsFor / totalMatches).toFixed(1) : '0.0'}
                 </Text>
@@ -184,11 +185,11 @@ const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSh
                 <Text size="sm" fw={600}>
                   {!isNaN(stats.team1AvgMargin) ? stats.team1AvgMargin.toFixed(1) : '0.0'}
                 </Text>
-                <Text size="xs" c="dimmed">margin</Text>
+                <Text size="xs" c="dimmed"><Trans>margin</Trans></Text>
               </Group>
-              <Text size="xs" fw={500}>Avg Win Margin</Text>
+              <Text size="xs" fw={500}><Trans>Avg Win Margin</Trans></Text>
               <Group gap="xs">
-                <Text size="xs" c="dimmed">margin</Text>
+                <Text size="xs" c="dimmed"><Trans>margin</Trans></Text>
                 <Text size="sm" fw={600}>
                   {!isNaN(stats.team2AvgMargin) ? stats.team2AvgMargin.toFixed(1) : '0.0'}
                 </Text>
@@ -199,7 +200,9 @@ const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSh
       </Stack>
 
       <Stack gap="xs">
-        <Text size="sm" fw={600} px="md">Match History ({totalMatches} match{totalMatches !== 1 ? 'es' : ''})</Text>
+        <Text size="sm" fw={600} px="md">
+          <Trans>Match History (<Plural value={totalMatches} one="# match" other="# matches" />)</Trans>
+        </Text>
         <MatchList matches={matches} hideH2H />
       </Stack>
     </Stack>