feat: web i18n (#1286)

apps/web/src/app/(signing)/sign/[token]/signing-auth-page.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 import { signOut } from 'next-auth/react';
 
@@ -15,6 +17,7 @@ export type SigningAuthPageViewProps = {
 };
 
 export const SigningAuthPageView = ({ email, emailHasAccount }: SigningAuthPageViewProps) => {
+  const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isSigningOut, setIsSigningOut] = useState(false);
@@ -37,8 +40,8 @@ export const SigningAuthPageView = ({ email, emailHasAccount }: SigningAuthPageV
       });
     } catch {
       toast({
-        title: 'Something went wrong',
-        description: 'We were unable to log you out at this time.',
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to log you out at this time.`),
         duration: 10000,
         variant: 'destructive',
       });
@@ -50,10 +53,14 @@ export const SigningAuthPageView = ({ email, emailHasAccount }: SigningAuthPageV
   return (
     <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
       <div>
-        <h1 className="text-3xl font-semibold">Authentication required</h1>
+        <h1 className="text-3xl font-semibold">
+          <Trans>Authentication required</Trans>
+        </h1>
 
         <p className="text-muted-foreground mt-2 text-sm">
-          You need to be logged in as <strong>{email}</strong> to view this page.
+          <Trans>
+            You need to be logged in as <strong>{email}</strong> to view this page.
+          </Trans>
         </p>
 
         <Button
@@ -62,7 +69,7 @@ export const SigningAuthPageView = ({ email, emailHasAccount }: SigningAuthPageV
           onClick={async () => handleChangeAccount(email)}
           loading={isSigningOut}
         >
-          {emailHasAccount ? 'Login' : 'Sign up'}
+          {emailHasAccount ? <Trans>Login</Trans> : <Trans>Sign up</Trans>}
         </Button>
       </div>
     </div>