128 lines
4.6 KiB
TypeScript
128 lines
4.6 KiB
TypeScript
import { Steps } from '@/app/(tabs)/user-message';
|
|
import ChoiceSvg from '@/assets/icons/svg/choice.svg';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { useState } from 'react';
|
|
import { TouchableOpacity, View } from 'react-native';
|
|
interface Props {
|
|
setSteps: (steps: Steps) => void;
|
|
}
|
|
|
|
type ChoiceOption = {
|
|
id: string;
|
|
emoji: string;
|
|
label: string;
|
|
description: string;
|
|
};
|
|
|
|
export default function Choice({ setSteps }: Props) {
|
|
const [selectedOption, setSelectedOption] = useState<string[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleContinue = () => {
|
|
if (!selectedOption) return;
|
|
setIsLoading(true);
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
setSteps('done');
|
|
}, 500);
|
|
};
|
|
|
|
const options: ChoiceOption[] = [
|
|
{
|
|
id: 'wakeup',
|
|
emoji: '⏰',
|
|
label: 'Wake Up',
|
|
description: 'Start your day right with a gentle wake-up'
|
|
},
|
|
{
|
|
id: 'sleep',
|
|
emoji: '😴',
|
|
label: 'Sleep',
|
|
description: 'Drift off with calming sounds'
|
|
},
|
|
{
|
|
id: 'focus',
|
|
emoji: '🎯',
|
|
label: 'Focus',
|
|
description: 'Enhance your concentration'
|
|
},
|
|
{
|
|
id: 'relax',
|
|
emoji: '🧘',
|
|
label: 'Relax',
|
|
description: 'Unwind and de-stress'
|
|
},
|
|
{
|
|
id: 'relax1',
|
|
emoji: '🧘',
|
|
label: 'Relax1',
|
|
description: 'Unwind and de-stress'
|
|
},
|
|
{
|
|
id: 'relax11',
|
|
emoji: '🧘',
|
|
label: 'Relax11',
|
|
description: 'Unwind and de-stress'
|
|
},
|
|
];
|
|
|
|
return (
|
|
<View className="h-full bg-textPrimary overflow-y-auto">
|
|
{/* Fixed Header */}
|
|
<View className="p-[2rem] pb-0">
|
|
<View className="items-center flex flex-col gap-[2rem]">
|
|
<ChoiceSvg />
|
|
<ThemedText className="text-3xl !text-white text-center font-semibold">
|
|
Every memory matters.
|
|
</ThemedText>
|
|
<ThemedText className="text-base !text-white text-center">
|
|
Select a few to help Memo create better video capsules for you
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Scrollable Content */}
|
|
<View className="flex-1">
|
|
<View className="p-[2rem] pb-0">
|
|
<View className="gap-4">
|
|
{options.map((option) => (
|
|
<TouchableOpacity
|
|
key={option.id}
|
|
className={`p-[1rem] rounded-full bg-[#FFF8DE] border-2 ${selectedOption.includes(option.id) ? 'border-bgPrimary' : 'border-transparent'} w-full flex items-center justify-center`}
|
|
onPress={() => {
|
|
// 如果存在则删除，没有则添加，多选
|
|
if (selectedOption.includes(option.id)) {
|
|
// 剔除
|
|
setSelectedOption((prev) => prev.filter((id) => id !== option.id));
|
|
} else {
|
|
// 添加
|
|
setSelectedOption((prev) => ([...prev, option.id]));
|
|
}
|
|
}}
|
|
>
|
|
<ThemedText className="text-lg font-semibold !text-textTertiary text-center">
|
|
{option.label}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
))}
|
|
|
|
{/* Next Button */}
|
|
<View className="mt-8 mb-4">
|
|
<TouchableOpacity
|
|
className={`w-full bg-white rounded-full p-4 items-center ${isLoading ? 'opacity-70' : ''}`}
|
|
onPress={handleContinue}
|
|
disabled={isLoading}
|
|
>
|
|
<ThemedText className="text-textTertiary text-lg font-semibold">
|
|
Next
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|