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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client'
interface DecompositionData {
before: string
highlighted: string
after: string
}
interface PedagogicalDecompositionDisplayProps {
variant: 'tooltip' | 'guidance'
showLabel?: boolean
decomposition: DecompositionData | null
}
export function PedagogicalDecompositionDisplay({
variant = 'guidance',
showLabel = false,
decomposition,
}: PedagogicalDecompositionDisplayProps) {
if (
!decomposition ||
(!decomposition.before && !decomposition.highlighted && !decomposition.after)
) {
return null
}
if (variant === 'tooltip') {
return (
<>
{showLabel && (
<div
style={{
fontSize: '10px',
opacity: 0.7,
marginBottom: '2px',
textAlign: 'center',
}}
>
Working on:
</div>
)}
<div
style={{
fontSize: '10px',
marginBottom: '6px',
textAlign: 'center',
whiteSpace: 'nowrap',
overflow: 'hidden',
}}
>
<span style={{ opacity: 0.4, color: 'white' }}>{decomposition.before}</span>
<span
style={{
fontSize: '13px',
fontWeight: 'bold',
color: '#fbbf24',
backgroundColor: 'rgba(251, 191, 36, 0.2)',
padding: '2px 6px',
borderRadius: '4px',
border: '1px solid rgba(251, 191, 36, 0.4)',
}}
>
{decomposition.highlighted}
</span>
<span style={{ opacity: 0.4, color: 'white' }}>{decomposition.after}</span>
</div>
</>
)
}
// Guidance variant (existing styles)
return (
<span>
{decomposition.before}
<span
style={{
background:
'linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(147,51,234,0.1) 100%)',
color: '#1e3a8a',
padding: '4px 8px',
borderRadius: '6px',
border: '1px solid rgba(59,130,246,0.3)',
fontWeight: 600,
boxShadow: '0 1px 3px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.6)',
backdropFilter: 'blur(2px)',
display: 'inline-block',
}}
>
{decomposition.highlighted}
</span>
{decomposition.after}
</span>
)
}
|