123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import React from 'react';
|
||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||
|
||
interface DietOption {
|
||
id: string;
|
||
title: string;
|
||
description: string;
|
||
icon: string;
|
||
action: () => void;
|
||
}
|
||
|
||
interface DietOptionsCardProps {
|
||
cardId: string;
|
||
onSelectOption: (cardId: string, optionId: string) => void;
|
||
}
|
||
|
||
const DietOptionsCard: React.FC<DietOptionsCardProps> = ({
|
||
cardId,
|
||
onSelectOption
|
||
}) => {
|
||
const colorScheme = useColorScheme();
|
||
const theme = Colors[colorScheme ?? 'light'];
|
||
|
||
const dietOptions: DietOption[] = [
|
||
{
|
||
id: 'photo',
|
||
title: '拍照记录',
|
||
description: '拍摄食物照片，AI自动识别',
|
||
icon: 'camera',
|
||
action: () => onSelectOption(cardId, 'photo')
|
||
},
|
||
{
|
||
id: 'text',
|
||
title: '文字描述',
|
||
description: '用文字描述你吃了什么',
|
||
icon: 'create',
|
||
action: () => onSelectOption(cardId, 'text')
|
||
}
|
||
];
|
||
|
||
return (
|
||
<View style={[styles.bubble, { backgroundColor: theme.surface }]}>
|
||
<Text style={[styles.title, { color: theme.text }]}>选择记录方式</Text>
|
||
<View style={styles.dietOptionsContainer}>
|
||
{dietOptions.map((option) => (
|
||
<TouchableOpacity
|
||
key={option.id}
|
||
style={[styles.dietOptionBtn, {
|
||
backgroundColor: theme.background,
|
||
borderColor: `${theme.primary}4d`
|
||
}]}
|
||
onPress={option.action}
|
||
>
|
||
<View style={[styles.dietOptionIconContainer, {
|
||
backgroundColor: `${theme.primary}33`
|
||
}]}>
|
||
<Ionicons name={option.icon as any} size={20} color={theme.primary} />
|
||
</View>
|
||
<View style={styles.dietOptionTextContainer}>
|
||
<Text style={[styles.dietOptionTitle, { color: theme.text }]}>
|
||
{option.title}
|
||
</Text>
|
||
<Text style={[styles.dietOptionDesc, { color: theme.textMuted }]}>
|
||
{option.description}
|
||
</Text>
|
||
</View>
|
||
</TouchableOpacity>
|
||
))}
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
bubble: {
|
||
paddingHorizontal: 12,
|
||
paddingVertical: 10,
|
||
borderRadius: 16,
|
||
maxWidth: '85%',
|
||
alignSelf: 'flex-start',
|
||
gap: 12,
|
||
minWidth: 300
|
||
},
|
||
title: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
textAlign: 'center',
|
||
},
|
||
dietOptionsContainer: {
|
||
gap: 8,
|
||
},
|
||
dietOptionBtn: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
padding: 12,
|
||
borderRadius: 12,
|
||
borderWidth: 1,
|
||
},
|
||
dietOptionIconContainer: {
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: 20,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 12,
|
||
},
|
||
dietOptionTextContainer: {
|
||
flex: 1,
|
||
},
|
||
dietOptionTitle: {
|
||
fontSize: 15,
|
||
fontWeight: '700',
|
||
},
|
||
dietOptionDesc: {
|
||
fontSize: 13,
|
||
marginTop: 2,
|
||
},
|
||
});
|
||
|
||
export default DietOptionsCard; |