memowake-front/components/download/app.tsx

import HandlersSvg from "@/assets/icons/svg/handers.svg";
import LogoSvg from "@/assets/icons/svg/logo.svg";
import UserinfoTotalSvg from "@/assets/icons/svg/userinfoTotal.svg";
import { useTranslation } from 'react-i18next';
import { Linking, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface AppDownloadProps {
    IOS_APP_STORE_URL: string,
    ANDROID_APK_URL: string,
    platform: string
}

export const AppDownload = (props: AppDownloadProps) => {
    const { t } = useTranslation();
    const insets = useSafeAreaInsets();
    const { IOS_APP_STORE_URL, ANDROID_APK_URL, platform } = props

    const handleAppStoreDownload = () => {
        Linking.openURL(IOS_APP_STORE_URL);
    };

    const handlePlayStoreDownload = () => {
        Linking.openURL(ANDROID_APK_URL);
    };

    return (
        <View style={[styles.container, { paddingTop: insets.top }]}>
            {/* Main Content */}
            <View style={styles.content}>
                {/* App Icon */}
                <LogoSvg />

                {/* App Name */}
                <Text style={styles.appName}>MemoWake</Text>
                {/* QRCode */}

                <View style={styles.qrCodeContainer}>
                    <UserinfoTotalSvg style={{ marginBottom: -20, zIndex: 1 }} />
                    <HandlersSvg style={{ marginBottom: -4, zIndex: 3 }} />
                    <View style={{ zIndex: 2 }}>
                        <svg width="285" height="285" viewBox="0 0 285 285" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="285" height="285" rx="36" fill="white" />
                        </svg>
                    </View>
                </View>
                {/* Description */}
                <Text style={styles.description}>
                    {t('mobileDescription', { ns: 'download' })}
                </Text>

                {/* Download Button */}
                <TouchableOpacity
                    style={styles.downloadButton}
                    onPress={Platform.OS === 'ios' ? handleAppStoreDownload : handlePlayStoreDownload}
                >
                    <Text style={styles.downloadButtonText}>
                        {t('download', { ns: 'download' })}
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#FFB645',
    },
    qrCodeContainer: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    qrCodeBg: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    closeButton: {
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    closeButtonText: {
        color: '#fff',
        fontSize: 18,
        lineHeight: 24,
    },
    content: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingBottom: 40,
    },
    appIconImage: {
        width: 100,
        height: 100
    },
    appIconText: {
        fontSize: 50,
    },
    appName: {
        fontSize: 32,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 12,
    },
    description: {
        fontSize: 16,
        color: 'rgba(255, 255, 255, 0.9)',
        textAlign: 'center',
        marginBottom: 32,
        paddingHorizontal: 40,
        lineHeight: 24,
    },
    downloadButton: {
        backgroundColor: '#fff',
        borderRadius: 30,
        paddingVertical: 16,
        paddingHorizontal: 40,
        minWidth: 240,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.1,
        shadowRadius: 8,
        elevation: 5,
    },
    downloadButtonText: {
        color: '#FF8C00',
        fontSize: 18,
        fontWeight: 'bold',
    },
    badgesContainer: {
        alignItems: 'center',
        paddingBottom: 40,
    },
    availableOnText: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 14,
        marginBottom: 12,
    },
    badgesRow: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    badgeButton: {
        backgroundColor: '#fff',
        borderRadius: 8,
        paddingVertical: 8,
        paddingHorizontal: 16,
        marginHorizontal: 8,
        minWidth: 120,
        alignItems: 'center',
        justifyContent: 'center',
        height: 40,
    },
    badgeText: {
        fontSize: 14,
        fontWeight: '600',
    },
});