171 lines
9.1 KiB
TypeScript
171 lines
9.1 KiB
TypeScript
import { Steps } from '@/app/(tabs)/user-message';
|
|
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]">
|
|
<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="46" cy="46" r="40" fill="white" stroke="#FFB645" stroke-width="11" />
|
|
<mask id="mask0_33_184" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="6" y="6" width="80" height="80">
|
|
<circle cx="46" cy="46" r="40" fill="white" />
|
|
</mask>
|
|
<g mask="url(#mask0_33_184)">
|
|
<path d="M-10.4027 27.6923C14.6652 -15.7265 77.3348 -15.7265 102.403 27.6923L119.501 57.3077C144.569 100.727 113.234 155 63.0984 155H28.9016C-21.2342 155 -52.569 100.726 -27.5011 57.3077L-10.4027 27.6923Z" fill="#FFD18A" />
|
|
<rect x="42.1543" y="24.8718" width="2.5641" height="3.58974" rx="1.28205" transform="rotate(-180 42.1543 24.8718)" fill="#4C320C" />
|
|
<rect x="51.3848" y="24.8718" width="2.5641" height="3.58974" rx="1.28205" transform="rotate(-180 51.3848 24.8718)" fill="#4C320C" />
|
|
<path d="M9.24226 51.13C26.9712 25.3565 65.0303 25.3565 82.7593 51.13L102.951 80.4839C123.313 110.085 102.121 150.385 66.1926 150.385H25.8088C-10.1197 150.385 -31.3117 110.085 -10.9496 80.4839L9.24226 51.13Z" fill="#FFF8DE" />
|
|
<g filter="url(#filter0_i_33_184)">
|
|
<ellipse cx="81.6411" cy="46.6667" rx="42.0513" ry="30" fill="#FFF8DE" />
|
|
</g>
|
|
<g filter="url(#filter1_i_33_184)">
|
|
<ellipse cx="10.1025" cy="46.6667" rx="41.7949" ry="30" fill="#FFF8DE" />
|
|
</g>
|
|
<ellipse cx="45.7434" cy="31.795" rx="3.07692" ry="2.30769" transform="rotate(180 45.7434 31.795)" fill="#FFB8B9" />
|
|
<ellipse cx="7.32634" cy="2.92265" rx="7.32634" ry="2.92265" transform="matrix(0.912659 0.408721 0.408721 -0.912659 61.4287 82.0015)" fill="#FFD38D" />
|
|
<ellipse cx="22.3426" cy="82.3285" rx="7.32634" ry="2.92265" transform="rotate(155.875 22.3426 82.3285)" fill="#FFD38D" />
|
|
<path d="M45.2994 34.359C45.4968 34.0171 45.9903 34.0171 46.1877 34.359L46.6318 35.1282C46.8292 35.4701 46.5824 35.8975 46.1877 35.8975H45.2994C44.9047 35.8975 44.6579 35.4701 44.8553 35.1282L45.2994 34.359Z" fill="#4C320C" />
|
|
</g>
|
|
<defs>
|
|
<filter id="filter0_i_33_184" x="34.9745" y="16.6667" width="88.7179" height="61.5385" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
|
<feOffset dx="-4.61538" dy="1.53846" />
|
|
<feGaussianBlur stdDeviation="4.23077" />
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0" />
|
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_33_184" />
|
|
</filter>
|
|
<filter id="filter1_i_33_184" x="-31.6924" y="16.6667" width="88.718" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
|
<feOffset dx="5.1282" />
|
|
<feGaussianBlur stdDeviation="2.82051" />
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713974 0 0 0 0 0.272498 0 0 0 1 0" />
|
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_33_184" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<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>
|
|
);
|
|
}
|