i18n

src/features/login/components/code-prompt.tsx

@@ -2,9 +2,11 @@ import { useState } from 'react';
 import { Flex, PinInput, Title, Text, Stack, LoadingOverlay } from '@mantine/core';
 import useConsumeCode from '../hooks/use-consume-code';
 import { useSearch } from '@tanstack/react-router';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 const CodePrompt = () => {
   const { number } = useSearch({ from: '/login' });
+  const { t } = useLingui();
 
   const [isWrong, setIsWrong] = useState(false);
   const [code, setCode] = useState('');
@@ -24,10 +26,10 @@ const CodePrompt = () => {
 
   return (
     <Flex direction="column"  p={10} w='max-content' m='auto'>
-      <Title order={4}>Enter Verification Code</Title>
-      <Text size='xs'c="dimmed" mb={5}>A code was sent to +1 ({number?.slice(0, 3)}) {number?.slice(3, 6)}-{number?.slice(6)}</Text>
+      <Title order={4}><Trans>Enter Verification Code</Trans></Title>
+      <Text size='xs'c="dimmed" mb={5}><Trans>A code was sent to +1 ({number?.slice(0, 3)}) {number?.slice(3, 6)}-{number?.slice(6)}</Trans></Text>
       <Stack justify='center' p={10} gap={2} pos='relative'>
-        <PinInput aria-label="One time code"
+        <PinInput aria-label={t`One time code`}
           value={code}
           error={isWrong}
           onChange={handleChange}
@@ -38,7 +40,7 @@ const CodePrompt = () => {
           type='number'
         />
         <LoadingOverlay visible={isPending} overlayProps={{ blur: 0.375, radius: 'md', backgroundOpacity: 0.35 }} />
-        {isWrong && <Text c='red' size='xs'>Incorrect code</Text>}
+        {isWrong && <Text c='red' size='xs'><Trans>Incorrect code</Trans></Text>}
       </Stack>
     </Flex>
   )