All files / web/src/app/create/worksheets/components GenerationErrorDisplay.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useTranslations } from 'next-intl'
import { css } from '@styled/css'
import { stack, hstack } from '@styled/patterns'

interface GenerationErrorDisplayProps {
  error: string | null
  visible: boolean
  onRetry: () => void
}

/**
 * Display generation errors with retry button
 * Only visible when error state is active
 */
export function GenerationErrorDisplay({ error, visible, onRetry }: GenerationErrorDisplayProps) {
  const t = useTranslations('create.worksheets.addition')

  if (!visible || !error) {
    return null
  }

  return (
    <div
      data-status="error"
      className={css({
        bg: 'red.50',
        border: '1px solid',
        borderColor: 'red.200',
        rounded: '2xl',
        p: '8',
        mt: '8',
      })}
    >
      <div className={stack({ gap: '4' })}>
        <div className={hstack({ gap: '3', alignItems: 'center' })}>
          <div className={css({ fontSize: '2xl' })}>❌</div>
          <h3
            className={css({
              fontSize: 'xl',
              fontWeight: 'semibold',
              color: 'red.800',
            })}
          >
            {t('error.title')}
          </h3>
        </div>
        <pre
          className={css({
            color: 'red.700',
            lineHeight: 'relaxed',
            whiteSpace: 'pre-wrap',
            fontFamily: 'mono',
            fontSize: 'sm',
            overflowX: 'auto',
          })}
        >
          {error}
        </pre>
        <button
          type="button"
          data-action="try-again"
          onClick={onRetry}
          className={css({
            alignSelf: 'start',
            px: '4',
            py: '2',
            bg: 'red.600',
            color: 'white',
            fontWeight: 'medium',
            rounded: 'lg',
            transition: 'all',
            _hover: { bg: 'red.700' },
          })}
        >
          {t('error.tryAgain')}
        </button>
      </div>
    </div>
  )
}