All files / web/src/components/flowchart AnimatedProblemTile.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useMemo } from 'react'
import { css } from '../../../styled-system/css'
import { MathDisplay } from './MathDisplay'
import { formatProblemDisplay } from '@/lib/flowcharts/formatting'
import type { GeneratedExample } from '@/lib/flowcharts/loader'
import type { ExecutableFlowchart } from '@/lib/flowcharts/schema'

export interface AnimatedProblemTileProps {
  /** The generated example */
  example: GeneratedExample
  /** The flowchart (needed for formatting) */
  flowchart: ExecutableFlowchart
  /** Tile index (unused, kept for API compatibility) */
  index: number
}

/**
 * Tile that displays a problem expression.
 * Renders math expressions using MathML via MathDisplay.
 */
export function AnimatedProblemTile({ example, flowchart }: AnimatedProblemTileProps) {
  // Format problem using the proper system
  const problemDisplay = useMemo(
    () => formatProblemDisplay(flowchart, example.values),
    [flowchart, example.values]
  )

  return (
    <div
      data-component="animated-problem-tile"
      className={css({
        width: '100px',
        height: '60px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 'sm',
        overflow: 'hidden',
        backgroundColor: { base: 'gray.100', _dark: 'gray.800' },
        padding: '1',
      })}
    >
      <MathDisplay expression={problemDisplay} size="sm" />
    </div>
  )
}