inlineComponents TenFramesInline.tsx

0% Statements 0/43

0% Branches 0/1

0% Functions 0/1

0% Lines 0/43

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

import dynamic from 'next/dynamic'

const TenFramesHero = dynamic(() => import('@/components/blog/heroes/TenFramesHero'), {
  ssr: false,
  loading: () => (
    <div
      style={{
        height: 300,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#4b5563',
        fontSize: 14,
      }}
    >
      Loading…
    </div>
  ),
})

export function TenFramesInline() {
  return (
    <figure style={{ margin: '2.5rem 0' }}>
      <TenFramesHero />
      <figcaption
        style={{
          marginTop: '0.75rem',
          color: '#6b7280',
          fontSize: 13,
          fontStyle: 'italic',
          textAlign: 'center',
          lineHeight: 1.5,
        }}
      >
        27 + 14 at three scaffolding levels. The plain format hides the structure; the ten-frame
        makes it visible and touchable. The arithmetic is identical — what changes is how much of
        the reasoning the student has to hold in their head.
      </figcaption>
    </figure>
  )
}