i18n

src/features/bracket/components/match-dock.tsx

@@ -23,6 +23,7 @@ import TeamHeadToHeadSheet from "@/features/matches/components/team-head-to-head
 import { MatchReport } from "./match-report";
 import Sheet from "@/components/sheet/sheet";
 import { useSheet } from "@/hooks/use-sheet";
+import { Trans, useLingui } from "@lingui/react/macro";
 
 const EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
 
@@ -81,6 +82,7 @@ const TeamRow = ({
 const MatchDock = ({ match, onClose }: MatchDockProps) => {
   const reduceMotion = useReducedMotion();
   const h2hSheet = useSheet();
+  const { t } = useLingui();
   const hasPrivate = match?.home?.private || match?.away?.private;
   const ended = match?.status === "ended";
   const started = match?.status === "started";
@@ -118,14 +120,17 @@ const MatchDock = ({ match, onClose }: MatchDockProps) => {
                       />
                     )}
                     <Text size="xs" fw={600} c="dimmed" lineClamp={1}>
-                      Match {match.order} · Round {match.round + 1}
-                      {match.is_losers_bracket && " (Losers)"}
+                      {match.is_losers_bracket ? (
+                        <Trans>Match {match.order} · Round {match.round + 1} (Losers)</Trans>
+                      ) : (
+                        <Trans>Match {match.order} · Round {match.round + 1}</Trans>
+                      )}
                     </Text>
                   </Group>
                   <CloseButton
                     size="sm"
                     onClick={onClose}
-                    aria-label="Close match actions"
+                    aria-label={t`Close match actions`}
                   />
                 </Group>
 
@@ -165,12 +170,12 @@ const MatchDock = ({ match, onClose }: MatchDockProps) => {
                     </Suspense>
                   </Box>
                   {!hasPrivate && (
-                    <Tooltip label="Head to Head" withArrow position="top">
+                    <Tooltip label={t`Head to Head`} withArrow position="top">
                       <ActionIcon
                         variant="subtle"
                         size="sm"
                         onClick={h2hSheet.open}
-                        aria-label="View head-to-head"
+                        aria-label={t`View head-to-head`}
                         w={40}
                         style={{ flexShrink: 0 }}
                       >
@@ -207,7 +212,7 @@ const MatchDock = ({ match, onClose }: MatchDockProps) => {
       </AnimatePresence>
 
       {match?.home && match?.away && h2hSheet.isOpen && (
-        <Sheet title="Head to Head" {...h2hSheet.props}>
+        <Sheet title={t`Head to Head`} {...h2hSheet.props}>
           <TeamHeadToHeadSheet
             team1={match.home}
             team2={match.away}