heroes VisionBeforeAfter.tsx

0% Statements 0/102
0% Branches 0/1
0% Functions 0/1
0% Lines 0/102
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
93
94
95
96
97
98
99
100
101
102
103  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { css } from '../../../../styled-system/css'
import { VerticalProblem } from '@/components/practice/VerticalProblem'

export default function VisionBeforeAfter() {
  return (
    <div
      className={css({
        display: 'flex',
        gap: '3rem',
        padding: '2rem',
        alignItems: 'flex-start',
        justifyContent: 'center',
        height: '100%',
      })}
    >
      {/* Without Vision - Left Side */}
      <div className={css({ textAlign: 'center' })}>
        <div
          className={css({
            fontSize: '0.875rem',
            fontWeight: '600',
            color: 'gray.600',
            marginBottom: '1rem',
          })}
        >
          Without Vision
        </div>
        <div
          className={css({
            padding: '1.5rem',
            backgroundColor: 'gray.50',
            borderRadius: '12px',
            border: '2px solid',
            borderColor: 'gray.200',
          })}
        >
          <VerticalProblem
            terms={[45, 32, 18]}
            userAnswer=""
            isFocused={true}
            isCompleted={false}
            correctAnswer={95}
            size="large"
          />
        </div>
        <div
          className={css({
            fontSize: '0.75rem',
            color: 'gray.500',
            marginTop: '0.75rem',
          })}
        >
          No feedback until answer is entered
        </div>
      </div>

      {/* With Vision - Right Side */}
      <div className={css({ textAlign: 'center' })}>
        <div
          className={css({
            fontSize: '0.875rem',
            fontWeight: '600',
            color: 'green.600',
            marginBottom: '1rem',
          })}
        >
          With Vision Detection
        </div>
        <div
          className={css({
            padding: '1.5rem',
            backgroundColor: 'green.50',
            borderRadius: '12px',
            border: '2px solid',
            borderColor: 'green.300',
          })}
        >
          <VerticalProblem
            terms={[45, 32, 18]}
            userAnswer="77"
            isFocused={true}
            isCompleted={false}
            correctAnswer={95}
            size="large"
            detectedPrefixIndex={1}
          />
        </div>
        <div
          className={css({
            fontSize: '0.75rem',
            color: 'green.600',
            marginTop: '0.75rem',
          })}
        >
          Real-time checkmarks as terms complete
        </div>
      </div>
    </div>
  )
}