crazycharge-app/component/bookingMenuPage/bookingConfirmationPage.tsx

import { View, Text, ScrollView, Pressable, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import Svg, { Path } from 'react-native-svg';
import NormalButton from '../global/normal_button';

const PreviousPageSvg = () => (
    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <Path
            d="M7.04167 15.6667L16.375 25L14 27.3334L0.666672 14L14 0.666687L16.375 3.00002L7.04167 12.3334H27.3333V15.6667H7.04167Z"
            fill="black"
        />
    </Svg>
);

const BookingConfirmationPage = () => {
    return (
        <SafeAreaView
            style={{ flex: 1, backgroundColor: 'white' }}
            edges={['top', 'left', 'right']}
        >
            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
                <View className="flex-1">
                    <View className="pl-8 pt-8">
                        <Pressable
                            style={{ alignSelf: 'flex-start' }}
                            onPress={() => {
                                if (router.canGoBack()) {
                                    router.back();
                                } else {
                                    router.replace('./');
                                }
                            }}
                        >
                            <PreviousPageSvg />
                        </Pressable>
                        <Text className="text-3xl mt-8">確認您的預約</Text>
                    </View>

                    <View className="flex-1 mt-4 mx-[5%]">
                        <View className="flex-1 flex-row items-center pb-3">
                            <View className="flex-1 flex-column">
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    日期
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="text-6xl text-center  pt-2"
                                >
                                    3月14
                                </Text>
                            </View>
                            <View className="flex-1 flex-column">
                                <Text
                                    style={styles.grayColor}
                                    className="text-base pl-7"
                                >
                                    時間
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="text-6xl text-center pt-2"
                                >
                                    15:15
                                </Text>
                            </View>
                        </View>
                        <View className="flex-1 flex-column justify-center space-y-1 pb-3">
                            <Text
                                style={styles.grayColor}
                                className="text-base"
                            >
                                充電地點
                            </Text>
                            <Text
                                style={styles.greenColor}
                                className="text-3xl "
                            >
                                上環街市充電站
                            </Text>
                            <Text style={styles.grayColor} className="text-sm">
                                香港上環皇后大道中345號
                            </Text>
                        </View>
                        <View className="flex-1 flex-row  pb-3  ">
                            <View className="flex-column flex-1">
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    方案
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="text-lg"
                                >
                                    按每度電結算
                                </Text>
                                <Text
                                    style={styles.grayColor}
                                    className="text-sm"
                                >
                                    度數: 50kWh
                                </Text>
                            </View>
                            <View className="flex-column flex-1">
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    車輛
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="text-lg"
                                >
                                    TESLA Model 3
                                </Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View className="w-full h-1 bg-[#DBE4E8]" />
                <View className="flex-1 mx-[5%]">
                    <Text className="text-xl py-4">收費概要</Text>
                    <View className="flex-row justify-between">
                        <Text className="text-base">充電費用</Text>
                        <Text className="text-base">HK$ 175</Text>
                    </View>
                    <Text style={styles.grayColor} className="text-base">
                        按每度電結算: 50 kWh
                    </Text>
                    <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                    <View className="flex-row justify-between">
                        <Text className="text-base" style={styles.grayColor}>
                            小計
                        </Text>
                        <Text className="text-base">HK$ 175</Text>
                    </View>
                    <View className="flex-row justify-between">
                        <Text className="text-base" style={styles.grayColor}>
                            其他費用
                        </Text>
                        <Text className="text-base">HK$ 11</Text>
                    </View>
                    <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                    <View className="flex-row justify-between ">
                        <Text className="text-xl">總計</Text>
                        <Text className="text-xl">HK$ 186</Text>
                    </View>
                    <View className="mt-4">
                        <NormalButton
                            title={
                                <Text
                                    style={{
                                        color: 'white',
                                        fontSize: 16,
                                        fontWeight: '800'
                                    }}
                                >
                                    下一步
                                </Text>
                            }
                            onPress={() => console.log('abc')}
                            extendedStyle={{ padding: 24 }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default BookingConfirmationPage;

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    }
});