64 lines
1.3 KiB
TypeScript
64 lines
1.3 KiB
TypeScript
import React, { memo } from 'react';
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
|
|
import { useTheme } from '../../../theme';
|
|
|
|
interface TransferStepperProps {
|
|
currentStep: number;
|
|
}
|
|
|
|
const STEPS = ['Type', 'Beneficiary', 'Amount', 'Confirm', 'Success'];
|
|
|
|
const TransferStepperComponent = ({ currentStep }: TransferStepperProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View style={styles.row}>
|
|
{STEPS.map((step, index) => {
|
|
const isActive = index <= currentStep;
|
|
return (
|
|
<View key={step} style={styles.step}>
|
|
<View
|
|
style={[
|
|
styles.dot,
|
|
{
|
|
backgroundColor: isActive ? theme.colors.accent : theme.colors.cardBorder,
|
|
},
|
|
]}
|
|
/>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>{step}</Text>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
gap: 8,
|
|
},
|
|
step: {
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
flex: 1,
|
|
},
|
|
dot: {
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: 999,
|
|
},
|
|
label: {
|
|
fontSize: 10,
|
|
textAlign: 'center',
|
|
},
|
|
});
|
|
|
|
export const TransferStepper = memo(TransferStepperComponent);
|