i18n

src/features/players/components/profile/index.tsx

@@ -1,5 +1,6 @@
 import { Box, Stack, Text, Divider, Group, Button, Anchor } from "@mantine/core";
 import { Suspense, useState, useDeferredValue } from "react";
+import { Trans, useLingui } from "@lingui/react/macro";
 import { Link } from "@tanstack/react-router";
 import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
@@ -22,11 +23,11 @@ const StatsWithFilter = ({ id }: { id: string }) => {
   return (
     <Stack>
       <Group gap="xs" px="md" justify="space-between" align="center">
-        <Text size="md" fw={700}>Statistics</Text>
+        <Text size="md" fw={700}><Trans>Statistics</Trans></Text>
         <Group gap="xs">
-          <Button variant={viewType === 'all' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('all')}>All</Button>
-          <Button variant={viewType === 'mainline' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('mainline')}>Mainline</Button>
-          <Button variant={viewType === 'regional' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('regional')}>Regional</Button>
+          <Button variant={viewType === 'all' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('all')}><Trans>All</Trans></Button>
+          <Button variant={viewType === 'mainline' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('mainline')}><Trans>Mainline</Trans></Button>
+          <Button variant={viewType === 'regional' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('regional')}><Trans>Regional</Trans></Button>
         </Group>
       </Group>
       <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
@@ -44,18 +45,20 @@ const StatsContent = ({ id, viewType }: { id: string; viewType: 'all' | 'mainlin
 };
 
 const Profile = ({ id }: ProfileProps) => {
+  const { t } = useLingui();
   const { data: player } = usePlayer(id);
   const { data: matches } = usePlayerMatches(id);
 
   const tabs = [
     {
-      label: "Overview",
+      label: t`Overview`,
+      value: "overview",
       content: <>
         <Stack px="md">
           <Group justify="space-between" align="center">
-            <Text size="md" fw={700}>Badges</Text>
+            <Text size="md" fw={700}><Trans>Badges</Trans></Text>
             <Anchor component={Link} to="/badges" size="sm" fw={500}>
-              View all badges
+              <Trans>View all badges</Trans>
             </Anchor>
           </Group>
           <Suspense fallback={<BadgeShowcaseSkeleton />}>
@@ -67,11 +70,13 @@ const Profile = ({ id }: ProfileProps) => {
       </>,
     },
     {
-      label: "Matches",
+      label: t`Matches`,
+      value: "matches",
       content: <MatchList matches={matches || []} />,
     },
     {
-      label: "Teams",
+      label: t`Teams`,
+      value: "teams",
       content: <TeamList teams={player.teams || []} />,
     },
   ];