i18n

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

@@ -1,6 +1,7 @@
 import { Button, TextInput, Stack, Group, Text, Flex, Divider, NumberInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { Match } from "@/features/matches/types";
+import { Trans, useLingui } from "@lingui/react/macro";
 
 interface MatchFormProps {
   match: Match;
@@ -19,6 +20,7 @@ export const MatchForm: React.FC<MatchFormProps> = ({
   onCancel,
   loading = false,
 }) => {
+  const { t } = useLingui();
   const form = useForm({
     initialValues: {
       home_cups: match.home_cups || 10,
@@ -27,42 +29,42 @@ export const MatchForm: React.FC<MatchFormProps> = ({
     },
     validate: {
       home_cups: (value, values) => {
-        if (value === null || value === undefined) return "Home cups is required";
+        if (value === null || value === undefined) return t`Home cups is required`;
         if (values.ot_count > 0) return null;
-        
+
         const homeCups = Number(value);
         const awayCups = Number(values.away_cups);
-        
+
         if (homeCups !== 10 && awayCups !== 10) {
-          return "At least one team must have 10 cups";
+          return t`At least one team must have 10 cups`;
         }
-        
+
         if (homeCups === 10 && awayCups === 10) {
-          return "Both teams cannot have 10 cups";
+          return t`Both teams cannot have 10 cups`;
         }
-        
+
         return null;
       },
       away_cups: (value, values) => {
-        if (value === null || value === undefined) return "Away cups is required";
+        if (value === null || value === undefined) return t`Away cups is required`;
         if (values.ot_count > 0) return null;
-        
+
         const awayCups = Number(value);
         const homeCups = Number(values.home_cups);
-        
+
         if (homeCups !== 10 && awayCups !== 10) {
-          return "At least one team must have 10 cups";
+          return t`At least one team must have 10 cups`;
         }
-        
+
         if (homeCups === 10 && awayCups === 10) {
-          return "Both teams cannot have 10 cups";
+          return t`Both teams cannot have 10 cups`;
         }
-        
+
         return null;
       },
       ot_count: (value) =>
         value === null || value === undefined
-          ? "Overtime count is required"
+          ? t`Overtime count is required`
           : null,
     },
     transformValues: (values) => ({
@@ -85,7 +87,7 @@ export const MatchForm: React.FC<MatchFormProps> = ({
         <Group gap="xs">
           <Stack gap={0}>
             <Text fw={500} size="sm">
-              {match.home?.name} Cups
+              <Trans>{match.home?.name} Cups</Trans>
             </Text>
             {
               match.home?.players?.map(p => (<Text key={p.id} size='xs' c='dimmed'>
@@ -108,7 +110,7 @@ export const MatchForm: React.FC<MatchFormProps> = ({
         <Group gap="xs">
           <Stack gap={0}>
             <Text fw={500} size="sm">
-              {match.away?.name} Cups
+              <Trans>{match.away?.name} Cups</Trans>
             </Text>
             {
               match.away?.players?.map(p => (<Text key={p.id} size='xs' c='dimmed'>
@@ -130,7 +132,7 @@ export const MatchForm: React.FC<MatchFormProps> = ({
 
         <Group gap="xs">
           <Text fw={500} size="sm">
-            OT Count
+            <Trans>OT Count</Trans>
           </Text>
           <TextInput
             ml='auto'
@@ -147,7 +149,7 @@ export const MatchForm: React.FC<MatchFormProps> = ({
 
         <Stack mt="md">
           <Button type="submit" loading={loading}>
-            Update Match
+            <Trans>Update Match</Trans>
           </Button>
           <Button
             variant="subtle"
@@ -155,7 +157,7 @@ export const MatchForm: React.FC<MatchFormProps> = ({
             onClick={onCancel}
             disabled={loading}
           >
-            Cancel
+            <Trans>Cancel</Trans>
           </Button>
         </Stack>
       </Stack>