proof StepIndicator.tsx

0% Statements 0/88
0% Branches 0/1
0% Functions 0/1
0% Lines 0/88
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { PROOF_COLORS, PROOF_FONTS } from './styles'

interface StepIndicatorProps {
  state: 'done' | 'current' | 'future'
  stepNumber: number
  isHovered: boolean
  onClick?: () => void
  size?: number
}

export function StepIndicator({
  state,
  stepNumber,
  isHovered,
  onClick,
  size = 20,
}: StepIndicatorProps) {
  const isDone = state === 'done'
  const isCurrent = state === 'current'

  const background = isDone
    ? isHovered
      ? PROOF_COLORS.stepDoneHover
      : PROOF_COLORS.stepDone
    : isCurrent
      ? PROOF_COLORS.stepCurrent
      : PROOF_COLORS.stepFuture

  const color = isDone || isCurrent ? '#fff' : PROOF_COLORS.stepFutureText

  const content = isDone ? (isHovered ? '\u21BA' : '\u2713') : stepNumber

  if (onClick) {
    return (
      <button
        data-action="rewind-to-step"
        onClick={onClick}
        title={`Rewind to step ${stepNumber}`}
        style={{
          width: size,
          height: size,
          borderRadius: '50%',
          flexShrink: 0,
          marginTop: 1,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: Math.round(size * 0.55),
          fontWeight: 700,
          fontFamily: PROOF_FONTS.sans,
          background,
          color,
          transition: 'all 0.15s ease',
          border: 'none',
          padding: 0,
          cursor: 'pointer',
        }}
      >
        {content}
      </button>
    )
  }

  return (
    <div
      style={{
        width: size,
        height: size,
        borderRadius: '50%',
        flexShrink: 0,
        marginTop: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: Math.round(size * 0.55),
        fontWeight: 700,
        fontFamily: PROOF_FONTS.sans,
        background,
        color,
        transition: 'all 0.3s ease',
      }}
    >
      {content}
    </div>
  )
}