verify-request page.tsx

0% Statements 0/91
0% Branches 0/1
0% Functions 0/1
0% Lines 0/91
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import Link from 'next/link'
import { css } from '../../../../styled-system/css'
import { useTheme } from '@/contexts/ThemeContext'

export default function VerifyRequestPage() {
  const { resolvedTheme } = useTheme()
  const isDark = resolvedTheme === 'dark'

  return (
    <main
      data-component="verify-request-page"
      className={css({
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: isDark ? 'gray.900' : 'gray.50',
        padding: '1rem',
      })}
    >
      <div
        className={css({
          width: '100%',
          maxWidth: '400px',
          padding: '2rem',
          borderRadius: '16px',
          backgroundColor: isDark ? 'gray.800' : 'white',
          border: '1px solid',
          borderColor: isDark ? 'gray.700' : 'gray.200',
          boxShadow: isDark ? '0 8px 24px rgba(0, 0, 0, 0.4)' : '0 8px 24px rgba(0, 0, 0, 0.1)',
          textAlign: 'center',
        })}
      >
        <div
          className={css({
            width: '64px',
            height: '64px',
            margin: '0 auto 1.5rem',
            borderRadius: '50%',
            backgroundColor: isDark ? 'purple.900/30' : 'purple.50',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '2rem',
          })}
        >
          &#x2709;
        </div>

        <h1
          className={css({
            fontSize: '1.25rem',
            fontWeight: 'bold',
            color: isDark ? 'white' : 'gray.900',
            marginBottom: '0.75rem',
          })}
        >
          Check your email
        </h1>

        <p
          className={css({
            fontSize: '0.9375rem',
            color: isDark ? 'gray.400' : 'gray.600',
            lineHeight: '1.5',
            marginBottom: '1.5rem',
          })}
        >
          We sent you a sign-in link. Click the link in your email to continue.
        </p>

        <Link
          href="/"
          className={css({
            fontSize: '0.875rem',
            color: isDark ? 'purple.400' : 'purple.600',
            textDecoration: 'none',
            fontWeight: 500,
            _hover: {
              textDecoration: 'underline',
            },
          })}
        >
          Back to home
        </Link>
      </div>
    </main>
  )
}