96 lines
2.4 KiB
TypeScript
96 lines
2.4 KiB
TypeScript
import React from 'react';
|
||
import { View, StyleSheet, TouchableOpacity } from 'react-native';
|
||
import { SerifText } from './SerifText';
|
||
import { OnboardingColors } from '@/constants/OnboardingTheme';
|
||
|
||
export const INTENTS = [
|
||
{ id: 'love', label: '爱情', icon: '❤️' },
|
||
{ id: 'life', label: '生活', icon: '⛅' },
|
||
{ id: 'travel', label: '旅游', icon: '🌴' },
|
||
{ id: 'work', label: '职场', icon: '💼' },
|
||
];
|
||
|
||
interface IntentSelectionStepProps {
|
||
selectedIds: string[];
|
||
onToggle: (id: string) => void;
|
||
}
|
||
|
||
export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionStepProps) {
|
||
return (
|
||
<View style={styles.container}>
|
||
<SerifText style={styles.title}>你希望得到什么帮助？</SerifText>
|
||
|
||
<View style={styles.grid}>
|
||
{INTENTS.map((intent) => {
|
||
const isSelected = selectedIds.includes(intent.id);
|
||
return (
|
||
<TouchableOpacity
|
||
key={intent.id}
|
||
style={[
|
||
styles.card,
|
||
isSelected && styles.cardSelected
|
||
]}
|
||
onPress={() => onToggle(intent.id)}
|
||
activeOpacity={0.7}
|
||
>
|
||
<SerifText style={styles.icon}>{intent.icon}</SerifText>
|
||
<SerifText style={[styles.label, isSelected && styles.labelSelected]}>
|
||
{intent.label}
|
||
</SerifText>
|
||
</TouchableOpacity>
|
||
);
|
||
})}
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
alignItems: 'center',
|
||
width: '100%',
|
||
},
|
||
title: {
|
||
fontSize: 24,
|
||
marginBottom: 40,
|
||
textAlign: 'center',
|
||
},
|
||
grid: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
gap: 16,
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
},
|
||
card: {
|
||
width: '45%', // slightly less than half to accommodate gap
|
||
aspectRatio: 1.2,
|
||
backgroundColor: OnboardingColors.cardBackground,
|
||
borderRadius: 20,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.05,
|
||
shadowRadius: 10,
|
||
elevation: 2,
|
||
borderWidth: 2,
|
||
borderColor: 'transparent',
|
||
},
|
||
cardSelected: {
|
||
borderColor: OnboardingColors.buttonEnd, // Use pink as highlight
|
||
backgroundColor: '#FFFBF5',
|
||
},
|
||
icon: {
|
||
fontSize: 32,
|
||
},
|
||
label: {
|
||
fontSize: 18,
|
||
color: OnboardingColors.textPrimary,
|
||
},
|
||
labelSelected: {
|
||
fontWeight: 'bold',
|
||
},
|
||
});
|