All files / web/src/components/tutorial TutorialNavigation.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '../../../styled-system/css'
import { hstack } from '../../../styled-system/patterns'

interface NavigationState {
  canGoPrevious: boolean
  canGoNext: boolean
  totalSteps: number
}

interface TutorialNavigationProps {
  currentStepIndex: number
  navigationState: NavigationState
  isStepCompleted: boolean
  onPrevious: () => void
  onNext: () => void
}

export function TutorialNavigation({
  currentStepIndex,
  navigationState,
  isStepCompleted,
  onPrevious,
  onNext,
}: TutorialNavigationProps) {
  return (
    <div
      className={css({
        borderTop: '1px solid',
        borderColor: 'gray.200',
        p: 4,
        bg: 'gray.50',
      })}
    >
      <div className={hstack({ justifyContent: 'space-between' })}>
        <button
          onClick={onPrevious}
          disabled={!navigationState.canGoPrevious}
          className={css({
            px: 4,
            py: 2,
            border: '1px solid',
            borderColor: 'gray.300',
            borderRadius: 'md',
            bg: 'white',
            cursor: navigationState.canGoPrevious ? 'pointer' : 'not-allowed',
            opacity: navigationState.canGoPrevious ? 1 : 0.5,
            _hover: navigationState.canGoPrevious ? { bg: 'gray.50' } : {},
          })}
        >
          ← Previous
        </button>

        <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
          Step {currentStepIndex + 1} of {navigationState.totalSteps}
        </div>

        <button
          onClick={onNext}
          disabled={!navigationState.canGoNext && !isStepCompleted}
          className={css({
            px: 4,
            py: 2,
            border: '1px solid',
            borderColor: navigationState.canGoNext || isStepCompleted ? 'blue.300' : 'gray.300',
            borderRadius: 'md',
            bg: navigationState.canGoNext || isStepCompleted ? 'blue.500' : 'gray.200',
            color: navigationState.canGoNext || isStepCompleted ? 'white' : 'gray.500',
            cursor: navigationState.canGoNext || isStepCompleted ? 'pointer' : 'not-allowed',
            _hover: navigationState.canGoNext || isStepCompleted ? { bg: 'blue.600' } : {},
          })}
        >
          {navigationState.canGoNext ? 'Next →' : 'Complete Tutorial'}
        </button>
      </div>
    </div>
  )
}