crazycharge-app/component/bookingMenuPage/bookingMenuPage.tsx

import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
import TabViewComponent, { TabItem } from '../global/tabView';
import NormalButton from '../global/normal_button';

interface BookingMenuPageProps {}

const dummyTabItems: TabItem[] = [
    {
        imgURL: require('../../assets/dummyStationPicture.png'),
        date: '今天',
        time: '16:30',
        chargeStationName: '上環街市充電站',
        chargeStationAddress: '香港上環皇后大道中345號',
        distance: '400米'
    },
    {
        imgURL: require('../../assets/dummyStationPicture2.png'),
        date: '3月15',
        time: '17:45',
        chargeStationName: '中環IFC充電站',
        chargeStationAddress: '香港中環皇后大道中999號',
        distance: '680米'
    },
    {
        imgURL: require('../../assets/dummyStationPicture2.png'),
        date: '4月20',
        time: '12:30',
        chargeStationName: '中環IFC充電站',
        chargeStationAddress: '香港中環皇后大道中999號',
        distance: '680米'
    }
];

const BookingMenuPage: React.FC<BookingMenuPageProps> = () => {
    return (
        <View style={styles.container}>
            <View style={styles.topContainer}>
                <Text style={{ fontSize: 45 }}>預約</Text>
                <NormalButton
                    title={
                        <Text
                            style={{
                                color: 'white',
                                fontSize: 16,
                                fontWeight: '800'
                            }}
                        >
                            + 新增預約
                        </Text>
                    }
                    onPress={() => console.log('abc')}
                />
                <View style={styles.recentBookingMainContainer}>
                    <Text
                        style={{
                            fontWeight: 400,
                            fontSize: 16,
                            color: '#222222',
                            marginBottom: '5%'
                        }}
                    >
                        近期預約過
                    </Text>
                    <ScrollView>
                        <View style={styles.recentBookingRowContainer}>
                            <Image
                                source={require('../../assets/bookingLogo.png')}
                                style={{ height: 40, width: 40 }}
                            />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#1
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#1
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                        <View style={styles.recentBookingRowContainer}>
                            <Image
                                source={require('../../assets/bookingLogo.png')}
                                style={{ height: 40, width: 40 }}
                            />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#2
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#2
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                        <View style={styles.recentBookingRowContainer}>
                            <Image
                                source={require('../../assets/bookingLogo.png')}
                                style={{ height: 40, width: 40 }}
                            />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#3
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#3
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                        <View style={styles.recentBookingRowContainer}>
                            <Image
                                source={require('../../assets/bookingLogo.png')}
                                style={{ height: 40, width: 40 }}
                            />
                            <View
                                style={{
                                    flexDirection: 'row',
                                    justifyContent: 'space-between',
                                    flex: 1,
                                    borderBottomWidth: 0.5,
                                    paddingVertical: 15,
                                    borderColor: '#ccc',
                                    borderRadius: 8
                                }}
                            >
                                <View
                                    style={{
                                        marginLeft: 15,
                                        gap: 3
                                    }}
                                >
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#222222'
                                        }}
                                    >
                                        充電站#4
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: 16,
                                            color: '#888888'
                                        }}
                                    >
                                        充電站地址#4
                                    </Text>
                                </View>
                                <NormalButton
                                    title={
                                        <Text style={{ color: '#061E25' }}>
                                            重新預約
                                        </Text>
                                    }
                                    onPress={() => console.log('abc')}
                                    buttonPressedStyle={{
                                        backgroundColor: '#CFDEE4'
                                    }}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        paddingHorizontal: 25,
                                        paddingVertical: 1,
                                        borderRadius: 8
                                    }}
                                />
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>
            <View style={styles.tabViewContainer}>
                <TabViewComponent
                    titles={['已預約', '已完成']}
                    tabItems={dummyTabItems}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: 'white' },
    topContainer: {
        flex: 1,
        gap: 20,
        marginTop: 25,
        marginHorizontal: '5%'
    },
    recentBookingMainContainer: { flex: 1 },
    recentBookingRowContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    tabViewContainer: { flex: 1 }
});

export default BookingMenuPage;