Stepper

1. 1

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59

// StepperContext.js
import { useState, cloneElement, Children, type ReactElement, type ReactNode } from 'react'
import { Button } from '../buttons/button'
import { Flex } from '../layout/flex'

interface StepperProps {
	initialStep?: number
	children: ReactElement | ReactElement[]
}

const Stepper = ({ initialStep = 0, children }: StepperProps) => {
	const [currentStep, setCurrentStep] = useState(initialStep)

	const goToNextStep = () => setCurrentStep(prev => prev + 1)
	const goToPreviousStep = () => setCurrentStep(prev => prev - 1)

	return (
		<div className="stepper flex flex-col gap-fluid-4">
			{Children.map(children, (child, index) => {
				if (child.type === Step || child.type === StepperNavigation) {
					return cloneElement(child, { currentStep, goToNextStep, goToPreviousStep, index })
				}
				return child
			})}
		</div>
	)
}

interface StepProps {
	currentStep?: number
	index?: number
	children: ReactNode
}

const Step = ({ currentStep, index, children }: StepProps) => {
	return <div className={`step ${currentStep === index ? 'active block' : 'hidden'}`}>{currentStep === index && children}</div>
}

interface StepperNavigationProps {
	currentStep?: number
	goToNextStep?: () => void
	goToPreviousStep?: () => void
}

const StepperNavigation = ({ currentStep, goToNextStep, goToPreviousStep }: StepperNavigationProps) => {
	return (
		<Flex gap="4">
			<Button variant="secondary" onPress={goToPreviousStep} isDisabled={currentStep === 0}>
				Previous
			</Button>
			<Button variant="secondary" onPress={goToNextStep} isDisabled={false}>
				Next
			</Button>
		</Flex>
	)
}

export { Stepper, Step, StepperNavigation }