i18n

src/features/badges/components/badge-stats-table.tsx

@@ -18,6 +18,7 @@ import Sheet from '@/components/sheet/sheet';
 import PlayerList from '@/features/players/components/player-list';
 import { useAuth } from '@/contexts/auth-context';
 import { Player } from '@/features/players/types';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 const BadgeStatsTable = () => {
   const { data: allBadges } = useAllBadges();
@@ -41,7 +42,7 @@ const BadgeStatsTable = () => {
       <Container px={0} size='md'>
         <Stack align='center' gap='md' py='xl'>
           <Title order={3} c='dimmed'>
-            No Badges Available
+            <Trans>No Badges Available</Trans>
           </Title>
         </Stack>
       </Container>
@@ -83,9 +84,10 @@ const BadgeStatRow: React.FC<BadgeStatRowProps> = ({
 }) => {
   const badgeSheet = useSheet();
   const { user } = useAuth();
+  const { t } = useLingui();
 
   const playerNamesBlurb = useMemo(() => {
-    if (earnedBadges.length === 0) return 'No players yet';
+    if (earnedBadges.length === 0) return t`No players yet`;
 
     const currentUserHasBadge = earnedBadges.some(
       (eb) => eb.player.id === user?.id
@@ -100,27 +102,34 @@ const BadgeStatRow: React.FC<BadgeStatRowProps> = ({
       : earnedBadges.slice(0, 3);
 
     const names = displayPlayers.map((eb) => eb.player.first_name);
+    const namesList = names.join(', ');
 
     if (currentUserHasBadge) {
       const remaining = earnedBadges.length - 1 - names.length;
       if (names.length === 0 && remaining === 0) {
-        return 'You';
+        return t`You`;
       } else if (names.length === 0 && remaining > 0) {
-        return `You and ${remaining} other${remaining > 1 ? 's' : ''}`;
+        return remaining > 1
+          ? t`You and ${remaining} others`
+          : t`You and 1 other`;
       } else if (remaining > 0) {
-        return `You, ${names.join(', ')} and ${remaining} other${remaining > 1 ? 's' : ''}`;
+        return remaining > 1
+          ? t`You, ${namesList} and ${remaining} others`
+          : t`You, ${namesList} and 1 other`;
       } else {
-        return `You${names.length > 0 ? ` and ${names.join(', ')}` : ''}`;
+        return names.length > 0 ? t`You and ${namesList}` : t`You`;
       }
     } else {
       const remaining = earnedBadges.length - names.length;
       if (remaining > 0) {
-        return `${names.join(', ')} and ${remaining} other${remaining > 1 ? 's' : ''}`;
+        return remaining > 1
+          ? t`${namesList} and ${remaining} others`
+          : t`${namesList} and 1 other`;
       } else {
-        return names.join(', ');
+        return namesList;
       }
     }
-  }, [earnedBadges, user?.id]);
+  }, [earnedBadges, user?.id, t]);
 
   const playersForList: Player[] = useMemo(() => {
     return earnedBadges.map((eb) => ({
@@ -163,12 +172,12 @@ const BadgeStatRow: React.FC<BadgeStatRowProps> = ({
                 ).toFixed(0)}
                 %
               </Text>
-              <Text c="dimmed" size='xs'>of players</Text>
+              <Text c="dimmed" size='xs'><Trans>of players</Trans></Text>
             </Stack>
           </Grid.Col>
         </Grid>
       </UnstyledButton>
-      <Sheet title={badge.name + ' Badge Holders'} {...badgeSheet.props}>
+      <Sheet title={t`${badge.name} Badge Holders`} {...badgeSheet.props}>
         <PlayerList players={playersForList} />
       </Sheet>
       {!isLastRow && <Divider />}