101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
|
|
|
|
export const INTENTS = [
|
|
{ id: 'love', labelKey: 'intent.love', icon: '❤️' },
|
|
{ id: 'life', labelKey: 'intent.life', icon: '⛅' },
|
|
{ id: 'travel', labelKey: 'intent.travel', icon: '🌴' },
|
|
{ id: 'work', labelKey: 'intent.work', icon: '💼' },
|
|
];
|
|
|
|
interface IntentSelectionStepProps {
|
|
selectedIds: string[];
|
|
onToggle: (id: string) => void;
|
|
}
|
|
|
|
export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionStepProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>{t('intent.title')}</Text>
|
|
|
|
<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}
|
|
>
|
|
<Text style={styles.icon}>{intent.icon}</Text>
|
|
<Text style={[styles.label, isSelected && styles.labelSelected]}>
|
|
{t(intent.labelKey)}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
marginBottom: 40,
|
|
textAlign: 'center',
|
|
fontFamily: OnboardingFont.question,
|
|
color: OnboardingColors.textPrimary,
|
|
},
|
|
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,
|
|
fontFamily: OnboardingFont.question,
|
|
},
|
|
label: {
|
|
fontSize: 18,
|
|
color: OnboardingColors.textPrimary,
|
|
fontFamily: OnboardingFont.question,
|
|
},
|
|
labelSelected: {
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|