138 lines
3.0 KiB
TypeScript
138 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
|
|
interface ProgressIndicatorProps {
|
|
currentStep: number;
|
|
totalSteps?: number;
|
|
steps: string[];
|
|
}
|
|
|
|
export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
|
|
currentStep,
|
|
totalSteps = 2,
|
|
steps,
|
|
}) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.progressBar}>
|
|
{Array.from({ length: totalSteps - 1 }, (_, index) => (
|
|
<View
|
|
key={index}
|
|
style={[
|
|
styles.connector,
|
|
currentStep > index + 1 && styles.connectorActive,
|
|
]}
|
|
/>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.stepsContainer}>
|
|
{steps.map((step, index) => (
|
|
<View key={index} style={styles.stepItem}>
|
|
<View
|
|
style={[
|
|
styles.stepCircle,
|
|
currentStep > index + 1 && styles.stepCircleCompleted,
|
|
currentStep === index + 1 && styles.stepCircleActive,
|
|
]}
|
|
>
|
|
{currentStep > index + 1 ? (
|
|
<Text style={styles.checkMark}>✓</Text>
|
|
) : (
|
|
<Text
|
|
style={[
|
|
styles.stepNumber,
|
|
currentStep >= index + 1 && styles.stepNumberActive,
|
|
]}
|
|
>
|
|
{index + 1}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<Text
|
|
style={[
|
|
styles.stepLabel,
|
|
currentStep >= index + 1 && styles.stepLabelActive,
|
|
]}
|
|
>
|
|
{step}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingHorizontal: 24,
|
|
paddingVertical: 16,
|
|
},
|
|
progressBar: {
|
|
flexDirection: 'row',
|
|
marginBottom: 32,
|
|
},
|
|
connector: {
|
|
flex: 1,
|
|
height: 2,
|
|
backgroundColor: '#E5E5EA',
|
|
marginHorizontal: 8,
|
|
alignSelf: 'center',
|
|
},
|
|
connectorActive: {
|
|
backgroundColor: '#007AFF',
|
|
},
|
|
stepsContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
stepItem: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
stepCircle: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
backgroundColor: '#F2F2F7',
|
|
borderWidth: 2,
|
|
borderColor: '#E5E5EA',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 8,
|
|
},
|
|
stepCircleActive: {
|
|
backgroundColor: '#007AFF',
|
|
borderColor: '#007AFF',
|
|
},
|
|
stepCircleCompleted: {
|
|
backgroundColor: '#4ECDC4',
|
|
borderColor: '#4ECDC4',
|
|
},
|
|
stepNumber: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#8E8E93',
|
|
},
|
|
stepNumberActive: {
|
|
color: '#FFFFFF',
|
|
},
|
|
checkMark: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#FFFFFF',
|
|
},
|
|
stepLabel: {
|
|
fontSize: 12,
|
|
color: '#8E8E93',
|
|
textAlign: 'center',
|
|
},
|
|
stepLabelActive: {
|
|
color: '#007AFF',
|
|
fontWeight: '500',
|
|
},
|
|
});
|
|
|
|
export default ProgressIndicator;
|