i18n

src/features/players/components/league-head-to-head.tsx

@@ -1,6 +1,7 @@
 import { Stack, Text, TextInput, Box, Paper, Group, Divider, Center, ActionIcon, Badge } from "@mantine/core";
 import { useState, useMemo } from "react";
 import { MagnifyingGlassIcon, XIcon, ArrowRightIcon } from "@phosphor-icons/react";
+import { Trans, useLingui } from "@lingui/react/macro";
 import { useAllPlayerStats } from "../queries";
 import { useSheet } from "@/hooks/use-sheet";
 import Sheet from "@/components/sheet/sheet";
@@ -8,6 +9,7 @@ import PlayerHeadToHeadSheet from "./player-head-to-head-sheet";
 import PlayerAvatar from "@/components/player-avatar";
 
 const LeagueHeadToHead = () => {
+  const { t } = useLingui();
   const [player1Id, setPlayer1Id] = useState<string | null>(null);
   const [player2Id, setPlayer2Id] = useState<string | null>(null);
   const [search, setSearch] = useState("");
@@ -112,7 +114,7 @@ const LeagueHeadToHead = () => {
                   <Stack gap={4} align="center">
                     <PlayerAvatar size={36} disableFullscreen />
                     <Text size="xs" c="dimmed" fw={500}>
-                      Player 1
+                      <Trans>Player 1</Trans>
                     </Text>
                   </Stack>
                 )}
@@ -120,7 +122,7 @@ const LeagueHeadToHead = () => {
 
               <Center>
                 <Text size="xl" fw={700} c="dimmed">
-                  VS
+                  <Trans>VS</Trans>
                 </Text>
               </Center>
 
@@ -168,7 +170,7 @@ const LeagueHeadToHead = () => {
                   <Stack gap={4} align="center">
                     <PlayerAvatar size={36} disableFullscreen />
                     <Text size="xs" c="dimmed" fw={500}>
-                      Player 2
+                      <Trans>Player 2</Trans>
                     </Text>
                   </Stack>
                 )}
@@ -183,8 +185,8 @@ const LeagueHeadToHead = () => {
                 fullWidth
                 styles={{ label: { textTransform: "none" } }}
               >
-                {activeStep === 1 && "Select first player"}
-                {activeStep === 2 && "Select second player"}
+                {activeStep === 1 && <Trans>Select first player</Trans>}
+                {activeStep === 2 && <Trans>Select second player</Trans>}
               </Badge>
             ) : (
               <Group justify="center">
@@ -198,7 +200,7 @@ const LeagueHeadToHead = () => {
                   }}
                   td="underline"
                 >
-                  Clear both players
+                  <Trans>Clear both players</Trans>
                 </Text>
               </Group>
             )}
@@ -206,7 +208,7 @@ const LeagueHeadToHead = () => {
         </Paper>
 
         <TextInput
-          placeholder="Search players"
+          placeholder={t`Search players`}
           value={search}
           onChange={(e) => setSearch(e.currentTarget.value)}
           leftSection={<MagnifyingGlassIcon size={16} />}
@@ -218,7 +220,7 @@ const LeagueHeadToHead = () => {
           <Paper withBorder>
             {filteredPlayers.length === 0 && (
               <Text size="sm" c="dimmed" ta="center" py="xl">
-                {search ? `No players found matching "${search}"` : "No players available"}
+                {search ? t`No players found matching "${search}"` : t`No players available`}
               </Text>
             )}
 
@@ -259,7 +261,7 @@ const LeagueHeadToHead = () => {
       </Stack>
 
       {player1Id && player2Id && (
-        <Sheet title="Head to Head" {...h2hSheet.props}>
+        <Sheet title={t`Head to Head`} {...h2hSheet.props}>
           <PlayerHeadToHeadSheet
             player1Id={player1Id}
             player1Name={player1Name}