index.tsx 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. import { Link, useSearch } from '@tanstack/react-router'
  2. import {
  3. Card,
  4. CardContent,
  5. CardDescription,
  6. CardFooter,
  7. CardHeader,
  8. CardTitle,
  9. } from '@/components/ui/card'
  10. import { AuthLayout } from '../auth-layout'
  11. import { UserAuthForm } from './components/user-auth-form'
  12. export function SignIn() {
  13. const { redirect } = useSearch({ from: '/(auth)/sign-in' })
  14. return (
  15. <AuthLayout>
  16. <Card className='max-w-sm gap-4'>
  17. <CardHeader>
  18. <CardTitle className='text-lg tracking-tight'>Sign in</CardTitle>
  19. <CardDescription>
  20. Enter your email and password below to log into{' '}
  21. <br className='max-sm:hidden' /> your account. Don't have an
  22. account?{' '}
  23. <Link
  24. to='/sign-up'
  25. className='text-nowrap underline underline-offset-4 hover:text-primary'
  26. >
  27. Sign Up
  28. </Link>
  29. </CardDescription>
  30. </CardHeader>
  31. <CardContent>
  32. <UserAuthForm redirectTo={redirect} />
  33. </CardContent>
  34. <CardFooter>
  35. <p className='px-8 text-center text-sm text-muted-foreground'>
  36. By clicking sign in, you agree to our{' '}
  37. <a
  38. href='/terms'
  39. className='underline underline-offset-4 hover:text-primary'
  40. >
  41. Terms of Service
  42. </a>{' '}
  43. and{' '}
  44. <a
  45. href='/privacy'
  46. className='underline underline-offset-4 hover:text-primary'
  47. >
  48. Privacy Policy
  49. </a>
  50. .
  51. </p>
  52. </CardFooter>
  53. </Card>
  54. </AuthLayout>
  55. )
  56. }