90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet, TouchableOpacity, Text, Platform, Dimensions } from 'react-native';
|
|
import { OnboardingColors } from '@/constants/OnboardingTheme';
|
|
import AddIcon from '@/assets/images/icon/add_icon.svg';
|
|
import ReduceIcon from '@/assets/images/icon/reduce_icon.svg';
|
|
import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
|
|
|
|
const { height } = Dimensions.get('window');
|
|
|
|
interface ReminderStepProps {
|
|
value: number;
|
|
onChange: (value: number) => void;
|
|
onFinish: () => void;
|
|
}
|
|
|
|
export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
|
|
const handleReduce = () => {
|
|
if (value > 1) onChange(value - 1);
|
|
};
|
|
|
|
const handleAdd = () => {
|
|
if (value < 5) onChange(value + 1);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.counterContainer}>
|
|
<TouchableOpacity onPress={handleReduce} activeOpacity={0.7}>
|
|
<ReduceIcon width={47} height={47} />
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.numberWrapper}>
|
|
<Text style={styles.numberText}>{value}</Text>
|
|
<Text style={styles.unitText}>次</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>
|
|
<AddIcon width={47} height={47} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.footer}>
|
|
<TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
|
|
<BtnClicked width={87} height={57} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
paddingTop: 20,
|
|
},
|
|
counterContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
marginTop: 40,
|
|
},
|
|
numberWrapper: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-end',
|
|
marginHorizontal: 40,
|
|
},
|
|
numberText: {
|
|
fontSize: 107,
|
|
fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
|
|
fontWeight: '600',
|
|
color: OnboardingColors.textPrimary,
|
|
lineHeight: 120,
|
|
},
|
|
unitText: {
|
|
fontSize: 17,
|
|
fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
|
|
fontWeight: '600',
|
|
color: OnboardingColors.textPrimary,
|
|
marginBottom: 20,
|
|
marginLeft: 4,
|
|
},
|
|
footer: {
|
|
position: 'absolute',
|
|
bottom: height * 0.12,
|
|
alignItems: 'center',
|
|
}
|
|
});
|