wizard StepProgress.tsx

0% Statements 0/58

0% Branches 0/1

0% Functions 0/1

0% Lines 0/58

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { css } from '../../../../../../styled-system/css'

interface StepProgressProps {
  steps: string[]
  currentIndex: number
}

export function StepProgress({ steps, currentIndex }: StepProgressProps) {
  return (
    <div
      data-element="step-progress"
      className={css({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
        mt: 2,
      })}
    >
      {steps.map((step, index) => {
        const isDone = index < currentIndex
        const isCurrent = index === currentIndex
        const isUpcoming = index > currentIndex

        return (
          <div key={step} className={css({ display: 'flex', alignItems: 'center' })}>
            {/* Dot */}
            <div
              title={step}
              className={css({
                width: isCurrent ? '10px' : '8px',
                height: isCurrent ? '10px' : '8px',
                borderRadius: 'full',
                bg: isDone ? 'green.500' : isCurrent ? 'blue.500' : 'gray.600',
                transition: 'all 0.2s ease',
                cursor: 'help',
              })}
            />

            {/* Connector line (if not last) */}
            {index < steps.length - 1 && (
              <div
                className={css({
                  width: '20px',
                  height: '2px',
                  bg: isDone ? 'green.500' : 'gray.700',
                  mx: 0.5,
                })}
              />
            )}
          </div>
        )
      })}
    </div>
  )
}