All files / web/src/components/page-spots PracticeShowcase.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

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

/**
 * Showcase of practice problems for page spots.
 * Shows a row of static VerticalProblem examples in various states
 * (active, correct, incorrect) to demonstrate the practice experience.
 */
export function PracticeShowcase() {
  return (
    <div
      data-component="practice-showcase"
      className={css({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '1.5rem',
        padding: '1.5rem',
        width: '100%',
        height: '100%',
        flexWrap: 'wrap',
      })}
    >
      {/* Completed correct — simple addition */}
      <VerticalProblem
        terms={[27, 14]}
        userAnswer="41"
        isCompleted
        correctAnswer={41}
        size="large"
      />

      {/* Active — subtraction in progress */}
      <VerticalProblem terms={[83, -47]} userAnswer="3" isFocused size="large" />

      {/* Completed correct — 3-term problem */}
      <VerticalProblem
        terms={[45, 32, -18]}
        userAnswer="59"
        isCompleted
        correctAnswer={59}
        size="large"
      />

      {/* Active — multi-digit, waiting for input */}
      <VerticalProblem terms={[156, 234]} userAnswer="" size="large" />
    </div>
  )
}

/**
 * Compact showcase — fewer problems, fits tighter aspect ratios.
 */
export function PracticeShowcaseCompact() {
  return (
    <div
      data-component="practice-showcase-compact"
      className={css({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '1.25rem',
        padding: '1rem',
        width: '100%',
        height: '100%',
      })}
    >
      {/* Correct answer */}
      <VerticalProblem
        terms={[48, 35]}
        userAnswer="83"
        isCompleted
        correctAnswer={83}
        size="large"
      />

      {/* Actively solving */}
      <VerticalProblem terms={[72, -29]} userAnswer="4" isFocused size="large" />

      {/* Waiting for input */}
      <VerticalProblem terms={[63, 18]} userAnswer="" size="large" />
    </div>
  )
}