i18n

src/features/tournaments/components/upcoming-tournament/enroll-team/index.tsx

@@ -11,6 +11,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Loader } from "@mantine/core";
 import useEnrollTeam from "@/features/tournaments/hooks/use-enroll-team";
 import { useServerQuery } from "@/lib/tanstack-query/hooks";
+import { Trans, useLingui } from "@lingui/react/macro";
 
 interface EnrollTeamProps {
   tournamentId: string;
@@ -20,6 +21,7 @@ interface EnrollTeamProps {
 const EnrollTeam = ({ tournamentId, onSubmit }: EnrollTeamProps) => {
   const { open, isOpen, toggle } = useSheet();
   const { user } = useAuth();
+  const { t } = useLingui();
 
   const hasTeams = useMemo(() => !!user?.teams?.length, [user?.teams]);
   const [selectedTeamId, setSelectedTeamId] = useState<string>();
@@ -88,10 +90,10 @@ const EnrollTeam = ({ tournamentId, onSubmit }: EnrollTeamProps) => {
   return (
     <>
       <Button size="sm" onClick={open}>
-        Enroll Your Team
+        <Trans>Enroll Your Team</Trans>
       </Button>
 
-      <Sheet title={showTeamForm ? "Team Details" : "Enroll Team"} opened={isOpen} onChange={toggle}>
+      <Sheet title={showTeamForm ? t`Team Details` : t`Enroll Team`} opened={isOpen} onChange={toggle}>
         { isEnrolling && <Loader size="lg" /> }
         {showTeamForm && !isEnrolling ? (
           <TeamForm
@@ -108,7 +110,7 @@ const EnrollTeam = ({ tournamentId, onSubmit }: EnrollTeamProps) => {
               onSelect={handleSelect}
             />
             <Button mt='sm' variant="subtle" color='red' size="sm" onClick={toggle}>
-              Cancel
+              <Trans>Cancel</Trans>
             </Button>
           </>
         )}