i18n

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

@@ -3,6 +3,7 @@ import { useAuth } from "@/contexts/auth-context";
 import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
 import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
+import { useLingui } from "@lingui/react/macro";
 import NameUpdateForm from "./name-form";
 import PlayerAvatar from "@/components/player-avatar";
 import { useSheet } from "@/hooks/use-sheet";
@@ -14,6 +15,7 @@ interface HeaderProps {
 }
 
 const Header = ({ player }: HeaderProps) => {
+  const { t } = useLingui();
   const nameSheet = useSheet();
   const h2hSheet = useSheet();
   const { user: authUser } = useAuth();
@@ -80,12 +82,12 @@ const Header = ({ player }: HeaderProps) => {
         </Flex>
       </Stack>
 
-      <Sheet title='Update Name' {...nameSheet.props}>
+      <Sheet title={t`Update Name`} {...nameSheet.props}>
         <NameUpdateForm player={player} toggle={nameSheet.toggle} />
       </Sheet>
 
       {!owner && authUser && (
-        <Sheet title="Head to Head" {...h2hSheet.props}>
+        <Sheet title={t`Head to Head`} {...h2hSheet.props}>
           <PlayerHeadToHeadSheet
             player1Id={authUser.id}
             player1Name={authUserName}