new-api/web/default/src/features/auth/otp/index.tsx

import { Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { AuthLayout } from '../auth-layout'
import { OtpForm } from './components/otp-form'

export function Otp() {
  const { t } = useTranslation()
  return (
    <AuthLayout>
      <div className='w-full space-y-8'>
        <div className='space-y-3'>
          <h2 className='text-center text-2xl font-semibold tracking-tight sm:text-left'>
            {t('Two-factor Authentication')}
          </h2>
          <p className='text-muted-foreground text-left text-sm sm:text-base'>
            {t('Please enter the authentication code.')}
          </p>
          <p className='text-muted-foreground text-left text-sm sm:text-base'>
            {t('Session expired?')}{' '}
            <Link
              to='/sign-in'
              className='hover:text-primary font-medium underline underline-offset-4'
            >
              {t('Re-login')}
            </Link>
            .
          </p>
        </div>

        <OtpForm />
      </div>
    </AuthLayout>
  )
}