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';
import { SafeAreaView } from 'react-native-safe-area-context';
import RecentlyBookedScrollView from '../global/recentlyBookedScrollView';
import { router } from 'expo-router';

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 BookingMenuPageComponent: React.FC<BookingMenuPageProps> = () => {
    return (
        <SafeAreaView
            edges={['top', 'left', 'right']}
            className="flex-1 bg-white"
        >
            <View className="flex-1 mt-8 ">
                <View className="h-[55%] mx-[5%]">
                    <View className="justify-center">
                        <Text className="text-5xl pt-1 pb-6">預約</Text>
                        <NormalButton
                            title={
                                <Text
                                    style={{
                                        color: 'white',
                                        fontSize: 16,
                                        fontWeight: '800'
                                    }}
                                >
                                    + 新增預約
                                </Text>
                            }
                            onPress={() =>
                                router.push('reservationLocationPage')
                            }
                            extendedStyle={{ padding: 28 }}
                        />
                    </View>
                    <View className='min-h-[200px]'>
                        <RecentlyBookedScrollView />
                    </View>
                </View>
                <View className="h-[45%]">
                    <TabViewComponent
                        titles={['已預約', '已完成']}
                        tabItems={dummyTabItems}
                    />
                </View>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    recentBookingRowContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    }
});

export default BookingMenuPageComponent;