crazycharge-app/component/bookingMenuPage/makingBookingPageComponent.tsx

import { View, Text, ScrollView, Pressable, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import NormalButton from '../global/normal_button';
import {
    CheckMarkLogoSvg,
    DirectionLogoSvg,
    PreviousPageBlackSvg
} from '../global/SVG';
import { ChargingStationTabView } from '../global/chargingStationTabView';
import ChooseCarForChargingRow from '../global/chooseCarForChargingRow';

const dummyDataChooseCarForCharging = [
    {
        imageUrl: require('../../assets/car1.png'),
        VehicleName: 'TESLA - Model 3',
        isDefault: true
    },
    { VehicleName: 'TESLA - Model Y', isDefault: false },
    {
        imageUrl: require('../../assets/car1.png'),
        VehicleName: 'TESLA - Model X',
        isDefault: false
    },
    { VehicleName: 'TESLA - Model 3', isDefault: false }
];

const MakingBookingPageComponent = () => (
    <SafeAreaView
        style={{
            flex: 1,
            backgroundColor: 'white'
        }}
        edges={['right', 'top', 'left']}
    >
        <ScrollView className="flex-1 bg-white ">
            <View className="pb-4">
                <View className="pl-8 pt-8">
                    <Pressable
                        style={{ alignSelf: 'flex-start' }}
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('./');
                            }
                        }}
                    >
                        <PreviousPageBlackSvg />
                    </Pressable>
                    <Text className="text-3xl mt-8">上環街市充電站</Text>
                    <View className="flex-column">
                        <View className="flex-row justify-between items-center mr-[5%]">
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                香港上環皇后大道中345號
                            </Text>
                            <NormalButton
                                title={
                                    <View className="flex-row items-center justify-center text-center space-x-1">
                                        <DirectionLogoSvg />
                                        <Text className="text-base">路線</Text>
                                    </View>
                                }
                                onPress={() => console.log('路線')}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 61,
                                    paddingHorizontal: 20,
                                    paddingVertical: 8
                                }}
                            />
                        </View>
                        <View className="flex-row space-x-2 items-center">
                            <CheckMarkLogoSvg />
                            <Text>Walk-In</Text>
                            <Text>400米</Text>
                        </View>
                    </View>
                </View>
            </View>

            <View className=" bg-[#FAFAFA]">
                <View className=" bg-[#e7f5f8]">
                    <View className="mx-[5%] ">
                        <Text className="text-xl pt-4">選擇充電車輛</Text>
                        <ScrollView
                            horizontal={true}
                            contentContainerStyle={{
                                alignItems: 'center',
                                flexDirection: 'row',
                                marginVertical: 8
                            }}
                            className="space-x-2"
                        >
                            {dummyDataChooseCarForCharging.map((car, index) => (
                                <ChooseCarForChargingRow
                                    imageUrl={car.imageUrl}
                                    key={`${car.VehicleName}+${index}`}
                                    VehicleName={car.VehicleName}
                                    isDefault={car.isDefault}
                                />
                            ))}
                        </ScrollView>
                    </View>
                </View>

                <View className="mx-[5%] ">
                    <View className="justify-center p-4 pl-0">
                        <Pressable
                            style={{ alignSelf: 'flex-start' }}
                            onPress={() => console.log('選擇充電方案')}
                        >
                            <Text className="text-lg" style={styles.grayColor}>
                                選擇充電方案
                            </Text>
                        </Pressable>
                    </View>
                    <View className="justify-center p-4 pl-0 ">
                        <Pressable
                            style={{ alignSelf: 'flex-start' }}
                            onPress={() => console.log('選擇日期時間')}
                        >
                            <Text className="text-lg" style={styles.grayColor}>
                                選擇日期時間
                            </Text>
                        </Pressable>
                    </View>

                    <View className=" justify-center p-4 pl-0">
                        <Pressable
                            style={{ alignSelf: 'flex-start' }}
                            onPress={() => console.log('選擇充電座')}
                        >
                            <Text className="text-lg" style={styles.grayColor}>
                                選擇充電座
                            </Text>
                        </Pressable>
                    </View>
                </View>
            </View>

            <View className="mx-[5%] flex-1">
                <View
                    className="flex-row border-slate-300 mt-3 mb-6 rounded-2xl flex-1"
                    style={{ borderWidth: 1 }}
                >
                    <View className="flex-1 m-4">
                        <View className="flex-1 flex-row ">
                            <View className=" flex-1 flex-column  justify-between">
                                <Text className="text-xl " style={styles.text}>
                                    收費
                                </Text>

                                <View className="flex-row items-center space-x-2">
                                    <Text className="text-3xl text-[#02677D]">
                                        $20
                                    </Text>
                                    <Text style={styles.text}>每15分鐘</Text>
                                </View>
                            </View>
                            <View className="items-center justify-center">
                                <View className="w-[1px] h-[60%] bg-[#CCCCCC]" />
                            </View>
                            <View className="flex-1 flex-column ">
                                <View className="flex-1"></View>
                                <View className="flex-row items-center ml-4 space-x-2 ">
                                    <Text className="text-3xl text-[#02677D]">
                                        $3.5
                                    </Text>
                                    <Text style={styles.text}>每度電</Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>

                <Text className="text-xl pb-2 mx-[5%]" style={styles.text}>
                    充電站資訊
                </Text>
                <View className="h-[250px]">
                    <ChargingStationTabView titles={['充電插頭', '其他']} />
                </View>
            </View>
        </ScrollView>
    </SafeAreaView>
);

export default MakingBookingPageComponent;

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    topLeftTriangle: {
        width: 0,
        height: 0,
        borderLeftWidth: 50,
        borderBottomWidth: 50,
        borderLeftColor: '#02677D',
        borderBottomColor: 'transparent',
        position: 'absolute',
        top: 0,
        left: 0
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});