memowake-front/components/user-message.tsx/done.tsx

import { router } from 'expo-router';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Dimensions, Image, PixelRatio, Platform, StyleSheet, View } from 'react-native';
import Animated, {
    Easing,
    useAnimatedStyle,
    useSharedValue,
    withTiming
} from 'react-native-reanimated';
import { ThemedText } from '../ThemedText';
import { Fireworks } from '../firework';
import StepButton from '../ui/button/stepButton';

export default function Done() {
    const { t } = useTranslation();
    const height = Dimensions.get('window').height;
    const fontSize = (size: number) => {
        const scale = PixelRatio.getFontScale();
        return size / scale;
    };
    // Animation values
    const translateX = useSharedValue(300);
    const translateY = useSharedValue(300);
    const opacity = useSharedValue(0);

    // Animation style
    const animatedStyle = useAnimatedStyle(() => ({
        transform: [
            { translateX: translateX.value },
            { translateY: translateY.value }
        ],
        opacity: opacity.value
    }));

    // Start animation when component mounts
    useEffect(() => {
        translateX.value = withTiming(0, {
            duration: 800,
            easing: Easing.out(Easing.cubic)
        });
        translateY.value = withTiming(0, {
            duration: 800,
            easing: Easing.out(Easing.cubic)
        });
        opacity.value = withTiming(1, {
            duration: 1000,
            easing: Easing.out(Easing.cubic)
        });
    }, []);

    const handleContinue = () => {
        router.replace('/ask')
    };

    const renderWebView = () => (
        <View style={styles.webContainer}>
            <View style={styles.webContent}>
                <ThemedText style={styles.title}>
                    {t('auth.userMessage.allDone', { ns: 'login' })}
                </ThemedText>
            </View>
            <View style={styles.flex1} />
            <View style={styles.lottieContainer}>
                <Animated.View style={animatedStyle}>
                    <Image
                        source={require('@/assets/images/png/icon/doneIP.png')}
                    />
                </Animated.View>
            </View>
            <View style={styles.webButtonContainer}>
                <StepButton
                    text={t('auth.userMessage.next', { ns: 'login' })}
                    onPress={handleContinue}
                />
            </View>
        </View>
    );

    const renderMobileView = () => (
        <View style={styles.mobileContainer}>
            <View style={styles.mobileContent}>
                <View style={[styles.mobileTextContainer, { marginTop: -height * 0.15 }]}>
                    <ThemedText style={[styles.title, { fontSize: fontSize(36) }]}>
                        {t('auth.userMessage.allDone', { ns: 'login' })}
                    </ThemedText>
                </View>
                <View style={styles.mobileButtonContainer}>
                    <StepButton
                        text={t('auth.userMessage.next', { ns: 'login' })}
                        onPress={handleContinue}
                    />
                </View>
            </View>
            <View style={styles.fireworksContainer}>
                <Fireworks
                    autoPlay={true}
                    loop={false}
                    interval={1500}
                    particleCount={90}
                />
            </View>
            <View style={styles.lottieContainer}>
                <Animated.View style={animatedStyle}>
                    <Image
                        source={require('@/assets/images/png/icon/doneIP.png')}
                    />
                </Animated.View>
            </View>
        </View>
    );

    return (
        <View style={styles.container}>
            {Platform.OS === 'web' ? renderWebView() : renderMobileView()}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    flex1: {
        flex: 1,
    },
    webContainer: {
        flex: 1,
        backgroundColor: '#FFB645',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        height: '100%',
    },
    webContent: {
        position: 'absolute',
        top: 32,
        left: 0,
        right: 0,
        bottom: 160,
        justifyContent: 'center',
        alignItems: 'center',
    },
    doneSvgContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    webButtonContainer: {
        position: 'absolute',
        bottom: 16,
        left: 0,
        right: 0,
        padding: 16,
        zIndex: 99,
    },
    mobileContainer: {
        flex: 1,
        backgroundColor: 'transparent',
    },
    mobileContent: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 30,
    },
    mobileTextContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    mobileButtonContainer: {
        position: 'absolute',
        bottom: 16,
        left: 0,
        right: 0,
        padding: 16,
        zIndex: 99,
    },
    title: {
        fontSize: 32,
        lineHeight: 40,
        color: '#FFFFFF',
        textAlign: 'center',
        fontWeight: 'bold',
    },
    nextButton: {
        width: '100%',
        backgroundColor: '#3B82F6',
        borderRadius: 999,
        padding: 16,
        alignItems: 'center',
    },
    buttonText: {
        color: '#FFFFFF',
        fontSize: 18,
        fontWeight: '600',
    },
    fireworksContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 10,
    },
    lottieContainer: {
        position: 'absolute',
        right: 0,
        bottom: 0,
        zIndex: 20
    },
});