crazycharge-app/component/bookingMenuPage/makingBookingPage.tsx

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

import { SceneMap, TabBar, TabView } from 'react-native-tab-view';

interface ChargingStationTabViewProps {
    titles: string[];
}

const ChargingStationTabView: React.FC<ChargingStationTabViewProps> = ({
    titles
}) => {
    const layout = useWindowDimensions();

    //tab 1
    const FirstRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg" style={styles.text}>
                這是一段有關充電站的說明
            </Text>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg " style={styles.text}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            </Text>
        </ScrollView>
    );

    const renderScene = SceneMap({
        firstRoute: FirstRoute,
        secondRoute: SecondRoute
    });
    const [routes] = React.useState([
        { key: 'firstRoute', title: titles[0] },
        { key: 'secondRoute', title: titles[1] }
    ]);
    const [index, setIndex] = React.useState(0);

    const renderTabBar = (props: any) => (
        <TabBar
            {...props}
            renderLabel={({ route, focused }) => (
                <Text
                    style={{
                        color: focused ? '#000000' : '#CCCCCC',
                        fontWeight: focused ? '300' : 'thin',
                        fontSize: 17
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#000000',
                height: 1
            }}
            style={{
                backgroundColor: 'white',
                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};

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 CheckLogoSvg = () => (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <Rect width="20" height="20" rx="10" fill="#02677D" />
        <Path
            d="M7.95837 15L3.20837 10.25L4.39587 9.06251L7.95837 12.625L15.6042 4.97917L16.7917 6.16667L7.95837 15Z"
            fill="white"
        />
    </Svg>
);

const DirectionLogoSvg = () => (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <Path
            d="M6.87502 12.2917H8.12498V9.79166H11.4584V11.5785L13.8702 9.16668L11.4584 6.74685V8.5417H7.62821C7.41481 8.5417 7.23592 8.61358 7.09156 8.75733C6.9472 8.90108 6.87502 9.0792 6.87502 9.29168V12.2917ZM10.0016 17.8045C9.81357 17.8045 9.62831 17.7668 9.44581 17.6915C9.26331 17.6162 9.09655 17.5032 8.94552 17.3525L2.64748 11.0545C2.49684 10.9041 2.38386 10.738 2.30854 10.5562C2.23321 10.3745 2.19554 10.1896 2.19554 10.0016C2.19554 9.81358 2.23321 9.62833 2.30854 9.44583C2.38386 9.26333 2.49684 9.09656 2.64748 8.94554L8.94552 2.64749C9.09594 2.49686 9.26202 2.38388 9.44377 2.30856C9.62552 2.23322 9.8104 2.19556 9.99842 2.19556C10.1864 2.19556 10.3717 2.23322 10.5542 2.30856C10.7367 2.38388 10.9035 2.49686 11.0545 2.64749L17.3525 8.94554C17.5032 9.09595 17.6161 9.26204 17.6915 9.44379C17.7668 9.62554 17.8045 9.81042 17.8045 9.99843C17.8045 10.1864 17.7668 10.3717 17.6915 10.5542C17.6161 10.7367 17.5032 10.9035 17.3525 11.0545L11.0545 17.3525C10.9041 17.5032 10.738 17.6162 10.5562 17.6915C10.3745 17.7668 10.1896 17.8045 10.0016 17.8045ZM6.66667 13.3333L9.82371 16.4904C9.87179 16.5385 9.93056 16.5625 10 16.5625C10.0694 16.5625 10.1282 16.5385 10.1763 16.4904L16.4904 10.1763C16.5385 10.1282 16.5625 10.0695 16.5625 10C16.5625 9.93057 16.5385 9.87181 16.4904 9.82372L10.1763 3.50964C10.1282 3.46156 10.0694 3.43752 10 3.43752C9.93056 3.43752 9.87179 3.46156 9.82371 3.50964L3.50962 9.82372C3.46154 9.87181 3.4375 9.93057 3.4375 10C3.4375 10.0695 3.46154 10.1282 3.50962 10.1763L6.66667 13.3333Z"
            fill="black"
        />
    </Svg>
);

const StarSvg = () => (
    <Svg width="16" height="15" viewBox="0 0 16 15" fill="none">
        <Path
            d="M3.32507 14.9663L4.56544 9.65284L0.442368 6.08167L5.87314 5.61052L8.00007 0.600891L10.127 5.61052L15.5578 6.08167L11.4347 9.65284L12.6751 14.9663L8.00007 12.1451L3.32507 14.9663Z"
            fill="white"
        />
    </Svg>
);

const MakingBookingPage = () => (
    <SafeAreaView
        style={{
            flex: 1,
            backgroundColor: 'white'
        }}
        edges={['right', 'top', 'left']}
    >
        <ScrollView className="flex-1 bg-white ">
            <View className="h-[23vh] ">
                <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 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('abc')}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 61,
                                    paddingHorizontal: 20,
                                    paddingVertical: 8
                                }}
                            />
                        </View>
                        <View className="flex-row space-x-2 items-center">
                            <CheckLogoSvg />
                            <Text>Walk-In</Text>
                            <Text>400米</Text>
                        </View>
                    </View>
                </View>
            </View>

            <View className="h-[50vh] bg-[#FAFAFA]">
                <View className="h-[30vh] bg-[#e7f5f8]">
                    <View className="flex-1 mx-[5%] ">
                        <Text className="text-xl pt-4">選擇充電車輛</Text>

                        <ScrollView
                            horizontal={true}
                            contentContainerStyle={{
                                alignItems: 'center',
                                flexDirection: 'row',
                                marginVertical: 8
                            }}
                            className="space-x-2 flex-1  "
                        >
                            <View className="relative bg-white w-44 h-[90%] overflow-hidden rounded-lg items-center justify-center ">
                                <View style={styles.topLeftTriangle} />
                                <View className="absolute top-1 left-1">
                                    <StarSvg />
                                </View>
                                <View className="items-center justify-center pt-4 space-y-2 ">
                                    <Image
                                        source={require('../../assets/car1.png')}
                                        style={{ height: 72, width: 140 }}
                                    />

                                    <Text className="text-base text-[#222222]">
                                        TESLA - Model 3
                                    </Text>
                                </View>
                            </View>

                            <View className="relative bg-white w-44 h-[90%] overflow-hidden rounded-lg items-center justify-center ">
                                <View className="items-center justify-center pt-4 space-y-2 ">
                                    <Image
                                        source={require('../../assets/car2.png')}
                                        style={{ height: 72, width: 140 }}
                                    />

                                    <Text className="text-base text-[#222222]">
                                        TESLA - Model 3
                                    </Text>
                                </View>
                            </View>
                            <View className="relative bg-white w-44 h-[90%] overflow-hidden rounded-lg items-center justify-center ">
                                <View className="items-center justify-center pt-4 space-y-2 ">
                                    <Image
                                        source={require('../../assets/car1.png')}
                                        style={{ height: 72, width: 140 }}
                                    />

                                    <Text className="text-base text-[#222222]">
                                        TESLA - Model 3
                                    </Text>
                                </View>
                            </View>
                            <View className="relative bg-white w-44 h-[90%] overflow-hidden rounded-lg items-center justify-center ">
                                <View className="items-center justify-center pt-4 space-y-2 ">
                                    <Image
                                        source={require('../../assets/car2.png')}
                                        style={{ height: 72, width: 140 }}
                                    />

                                    <Text className="text-base text-[#222222]">
                                        TESLA - Model 3
                                    </Text>
                                </View>
                            </View>
                            <View className="relative bg-white w-44 h-[90%] overflow-hidden rounded-lg items-center justify-center ">
                                <View className="items-center justify-center pt-4 space-y-2 ">
                                    <Image
                                        source={require('../../assets/car1.png')}
                                        style={{ height: 72, width: 140 }}
                                    />

                                    <Text className="text-base text-[#222222]">
                                        TESLA - Model 3
                                    </Text>
                                </View>
                            </View>
                        </ScrollView>
                    </View>
                </View>

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

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

            <View className="h-[50vh] bg-white mx-[5%]">
                <View
                    className="flex-1 flex-row max-h-[100px] border-slate-300 my-6 rounded-2xl"
                    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>
                <ChargingStationTabView titles={['充電插頭', '其他']} />
            </View>
        </ScrollView>
    </SafeAreaView>
);

export default MakingBookingPage;

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'
    }
});