All files / web/src/app/test-static-abacus page.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Test page for AbacusStatic - Server Component
 * This demonstrates that AbacusStatic works without "use client"
 *
 * Note: Uses /static import path to avoid client-side code
 */

import { AbacusStatic } from '@soroban/abacus-react/static'

export default function TestStaticAbacusPage() {
  const numbers = [1, 2, 3, 4, 5, 10, 25, 50, 100, 123, 456, 789]

  return (
    <div style={{ padding: '40px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ marginBottom: '10px' }}>AbacusStatic Test (Server Component)</h1>
      <p style={{ color: '#64748b', marginBottom: '30px' }}>
        This page is a React Server Component - no &quot;use client&quot; directive! All abacus
        displays below are rendered on the server with zero client-side JavaScript.
      </p>

      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: '20px',
        }}
      >
        {numbers.map((num) => (
          <div
            key={num}
            style={{
              padding: '20px',
              background: 'white',
              border: '2px solid #e2e8f0',
              borderRadius: '12px',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '10px',
            }}
          >
            <AbacusStatic value={num} columns="auto" hideInactiveBeads compact scaleFactor={0.9} />
            <span style={{ fontSize: '20px', fontWeight: 'bold', color: '#475569' }}>{num}</span>
          </div>
        ))}
      </div>

      <div
        style={{
          marginTop: '40px',
          padding: '20px',
          background: '#f0fdf4',
          borderRadius: '8px',
        }}
      >
        <h2 style={{ marginTop: 0, color: '#166534' }}>✅ Success!</h2>
        <p style={{ color: '#15803d' }}>
          If you can see the abacus displays above, then AbacusStatic is working correctly in React
          Server Components. Check the page source - you&apos;ll see pure HTML/SVG with no
          client-side hydration markers!
        </p>
      </div>
    </div>
  )
}