i18n

src/features/admin/components/admin-page.tsx

@@ -1,4 +1,5 @@
 import { List } from "@mantine/core";
+import { useLingui } from "@lingui/react/macro";
 import ListLink from "@/components/list-link";
 import {
   DatabaseIcon,
@@ -13,6 +14,7 @@ import { migrateBadgeProgress } from "@/features/badges/server";
 import { useState } from "react";
 
 const AdminPage = () => {
+  const { t } = useLingui();
   const [isMigrating, setIsMigrating] = useState(false);
 
   const handleMigrateBadges = async () => {
@@ -26,35 +28,35 @@ const AdminPage = () => {
   return (
     <List p="0">
       <ListLink
-        label="Manage Tournaments"
+        label={t`Manage Tournaments`}
         Icon={TrophyIcon}
         to="/admin/tournaments"
       />
       <ListLink
-        label="Award Badges"
+        label={t`Award Badges`}
         Icon={CrownIcon}
         to="/admin/badges"
       />
       <ListButton
-        label="Migrate Badge Progress"
+        label={t`Migrate Badge Progress`}
         Icon={MedalIcon}
         onClick={handleMigrateBadges}
         loading={isMigrating}
       />
       <ListLink
-        label="Activities"
+        label={t`Activities`}
         Icon={ListIcon}
         to="/admin/activities"
       />
       <ListButton
-        label="Open Pocketbase"
+        label={t`Open Pocketbase`}
         Icon={DatabaseIcon}
         onClick={() =>
           window.location.replace(process.env.POCKETBASE_URL! + "/_/")
         }
       />
       <ListLink
-        label="Bracket Preview"
+        label={t`Bracket Preview`}
         Icon={TreeStructureIcon}
         to="/admin/preview"
       />

src/features/admin/components/award-badges.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { Box, Card, Text, Select, Button, Group, Stack, Badge, Divider } from "@mantine/core";
+import { Trans, useLingui } from "@lingui/react/macro";
 import { awardManualBadge } from "@/features/badges/server";
 import { useAllBadges } from "@/features/badges/queries";
 import toast from "@/lib/sonner";
 import { usePlayers } from "@/features/players/queries";
 
 const AwardBadges = () => {
+  const { t } = useLingui();
   const { data: players } = usePlayers();
   const { data: allBadges } = useAllBadges();
 
@@ -30,13 +32,13 @@ const AwardBadges = () => {
       const selectedPlayer = players.find((p) => p.id === selectedPlayerId);
       const playerName = selectedPlayer
         ? `${selectedPlayer.first_name} ${selectedPlayer.last_name}`
-        : "Player";
+        : t`Player`;
 
-      toast.success(`Badge awarded to ${playerName}`);
+      toast.success(t`Badge awarded to ${playerName}`);
 
       setSelectedPlayerId(null);
     } catch (error) {
-      toast.error("Failed to award badge");
+      toast.error(t`Failed to award badge`);
     } finally {
       setIsAwarding(false);
     }
@@ -60,13 +62,13 @@ const AwardBadges = () => {
         <Stack gap="lg">
           <Box>
             <Text size="lg" fw={600} mb="xs">
-              Award Manual Badge
+              <Trans>Award Manual Badge</Trans>
             </Text>
           </Box>
 
           <Select
-            label="Badge Type"
-            placeholder="Select a badge"
+            label={t`Badge Type`}
+            placeholder={t`Select a badge`}
             data={badgeOptions}
             value={selectedBadgeId}
             onChange={setSelectedBadgeId}
@@ -81,8 +83,8 @@ const AwardBadges = () => {
 
               <Stack gap="md">
                 <Select
-                  label="Select Player"
-                  placeholder="Choose a player"
+                  label={t`Select Player`}
+                  placeholder={t`Choose a player`}
                   data={playerOptions}
                   value={selectedPlayerId}
                   onChange={setSelectedPlayerId}
@@ -99,7 +101,7 @@ const AwardBadges = () => {
                     loading={isAwarding}
                     size="md"
                   >
-                    Award Badge
+                    <Trans>Award Badge</Trans>
                   </Button>
                 </Group>
               </Stack>