All files / web/src/components/blog/heroes WorksheetTriptychHero.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useEffect, useState } from 'react'
import { css } from '../../../../styled-system/css'

export interface TriptychPanel {
  label: string
  description: string
  body: Record<string, unknown>
}

interface WorksheetTriptychHeroProps {
  panels: TriptychPanel[]
  componentName: string
}

/**
 * Shared hero layout for worksheet blog posts.
 * Fetches the same problem at different scaffolding levels from the
 * Typst example API and displays them side by side in a 3-panel triptych.
 */
export function WorksheetTriptychHero({ panels, componentName }: WorksheetTriptychHeroProps) {
  const [svgs, setSvgs] = useState<(string | null)[]>(panels.map(() => null))

  useEffect(() => {
    let cancelled = false

    async function fetchAll() {
      const results = await Promise.all(
        panels.map(async (panel) => {
          try {
            const res = await fetch('/api/create/worksheets/addition/example', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(panel.body),
            })
            if (!res.ok) return null
            const data = await res.json()
            return data.svg as string
          } catch {
            return null
          }
        })
      )

      if (!cancelled) {
        setSvgs(results)
      }
    }

    fetchAll()
    return () => {
      cancelled = true
    }
  }, [panels])

  return (
    <div
      data-component={componentName}
      className={css({
        display: 'flex',
        width: '100%',
        height: '100%',
        bg: '#0d1117',
        overflow: 'hidden',
      })}
    >
      {panels.map((panel, i) => (
        <div
          key={panel.label}
          data-element="scaffolding-panel"
          className={css({
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            borderRight: i < panels.length - 1 ? '1px solid rgba(255,255,255,0.1)' : 'none',
            overflow: 'hidden',
          })}
        >
          <div
            data-element="panel-label"
            className={css({
              px: '8px',
              py: '3px',
              bg: 'rgba(255,255,255,0.05)',
              borderBottom: '1px solid rgba(255,255,255,0.1)',
              fontSize: '10px',
              fontWeight: 600,
              color: '#9ca3af',
              textTransform: 'uppercase',
              letterSpacing: '0.05em',
              textAlign: 'center',
            })}
          >
            {panel.label}
          </div>
          <div
            data-element="svg-container"
            className={css({
              flex: 1,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              bg: 'white',
              m: '8px',
              mb: '4px',
              rounded: 'md',
              overflow: 'hidden',
              '& svg': {
                maxWidth: '100%',
                maxHeight: '100%',
                width: 'auto',
                height: 'auto',
              },
            })}
          >
            {svgs[i] ? (
              <div dangerouslySetInnerHTML={{ __html: svgs[i]! }} />
            ) : (
              <div
                className={css({
                  width: '60%',
                  height: '60%',
                  bg: '#f3f4f6',
                  rounded: 'md',
                  animation: 'pulse 2s infinite',
                })}
              />
            )}
          </div>
          <div
            data-element="panel-description"
            className={css({
              textAlign: 'center',
              fontSize: '10px',
              color: '#6b7280',
              pb: '6px',
            })}
          >
            {panel.description}
          </div>
        </div>
      ))}
    </div>
  )
}