i18n

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

@@ -1,17 +1,19 @@
 import { Button } from "@mantine/core";
 import PhoneNumberInput from "@/components/phone-number-input";
 import { useForm } from "@mantine/form";
+import { Trans, useLingui } from "@lingui/react/macro";
 import useCreateCode from "../hooks/use-create-code";
 
 const PhonePrompt = () => {
+  const { t } = useLingui();
   const form = useForm({
     initialValues: {
       number: ''
     },
     validate: {
       number: (value) => {
-        if (value.length === 0) return 'Phone number is required'
-        if (value.length !== 10) return 'Phone number must be 10 digits'
+        if (value.length === 0) return t`Phone number is required`
+        if (value.length !== 10) return t`Phone number must be 10 digits`
       }
     }
   })
@@ -27,11 +29,11 @@ const PhonePrompt = () => {
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <PhoneNumberInput
         id="number"
-        label='Enter your phone number'
+        label={t`Enter your phone number`}
         key={form.key('number')}
         {...form.getInputProps('number')}
       />
-      <Button type='submit' w='100%' mt='10px' variant='filled' loading={isPending}>Send Code</Button>
+      <Button type='submit' w='100%' mt='10px' variant='filled' loading={isPending}><Trans>Send Code</Trans></Button>
     </form>
   )
 }