i18n

src/features/tournaments/components/upcoming-tournament/rules-list-button.tsx

@@ -1,6 +1,7 @@
 import Sheet from "@/components/sheet/sheet"
 import { useSheet } from "@/hooks/use-sheet"
 import { ListIcon } from "@phosphor-icons/react"
+import { Trans, useLingui } from "@lingui/react/macro"
 import { useTournament } from "../../queries"
 import { Button, Flex, Loader, Stack } from "@mantine/core"
 import { lazy, Suspense } from "react"
@@ -15,12 +16,13 @@ interface RulesListButtonProps {
 const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
   const { data: tournament } = useTournament(tournamentId);
   const { open, isOpen, toggle } = useSheet();
+  const { t } = useLingui();
 
   return (
     <>
-      <NavTile label="Rules" Icon={ListIcon} onClick={open} />
+      <NavTile label={t`Rules`} Icon={ListIcon} onClick={open} />
 
-      <Sheet title="Tournament Rules" opened={isOpen} onChange={toggle}>
+      <Sheet title={t`Tournament Rules`} opened={isOpen} onChange={toggle}>
         <Stack gap="xs">
           <Suspense
             fallback={
@@ -31,7 +33,7 @@ const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
           >
             <RulesContent content={tournament?.rules || ''} />
           </Suspense>
-          <Button variant="subtle" c="red" onClick={toggle}>Close</Button>
+          <Button variant="subtle" c="red" onClick={toggle}><Trans>Close</Trans></Button>
         </Stack>
       </Sheet>
     </>