crazycharge-app/component/accountPages/uberVerificationPageComponent.tsx

import {
    View,
    Text,
    Image,
    Pressable,
    Dimensions,
    ScrollView
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg } from '../global/SVG';
import React from 'react';
import NormalButton from '../global/normal_button';

const UberVerificationPageComponent = () => {
    const couponData = [
        {
            number: '1',
            title: 'Uber 獨家充電優惠',
            description:
                '我們提供Uber司機獨家充電優惠，驗證後即享折扣，讓您更省錢充電。'
        },
        {
            number: '2',
            title: '快速驗證',
            description: '只需通過簡單步驟，輕鬆開啟專屬帳戶訪問。'
        },
        {
            number: '3',
            title: '輕鬆合作拍檔',
            description:
                '成為Crazy Charge合作拍檔！為Uber司機提供便利充電服務，獲得豐厚節省和獎勵。'
        }
    ];

    const CouponComponent = () => {
        return (
            <View
                style={{ borderWidth: 1 }}
                className="border-[#EEEEEE] rounded-2xl my-[5%] mx-[5%]"
            >
                <View className="mx-[5%] my-[3%]">
                    {couponData.map((item, index) => (
                        <React.Fragment key={index}>
                            <View className="flex-row items-center">
                                <Text className="text-5xl text-[#02677d] text-center w-10 mr-4">
                                    {item.number}
                                </Text>
                                <View className="flex-1">
                                    <Text className="text-lg text-[#222222]">
                                        {item.title}
                                    </Text>
                                    <Text className="text-base text-[#666666] mt-1">
                                        {item.description}
                                    </Text>
                                </View>
                            </View>
                            {index < couponData.length - 1 && (
                                <View className="h-0.5 w-full my-4 bg-[#EEEEEE]" />
                            )}
                        </React.Fragment>
                    ))}
                </View>
            </View>
        );
    };
    const screenHeight = Dimensions.get('window').height;
    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'right', 'left']}
        >
            <ScrollView className="flex-1">
                <View
                    style={{
                        marginTop: 25,
                        marginLeft: '5%',
                        marginBottom: '5%'
                    }}
                >
                    <Pressable
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                </View>
                <View>
                    <Image
                        source={require('../../assets/uberVerification.png')}
                        resizeMode="contain"
                    />
                </View>
                <CouponComponent />
                <View className="mx-[5%]">
                    <NormalButton
                        title={
                            <Text className="text-white text-xl">下一步</Text>
                        }
                        onPress={() => router.push('uberUploadPage')}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default UberVerificationPageComponent;