crazycharge-app/component/bookingMenuPage/bookingMenuPage.tsx

import { View, Text, StyleSheet, ScrollView, Dimensions } 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> = () => {
    const calculateResponsivePadding = () => {
        const screenHeight = Dimensions.get('window').height;
        return screenHeight * 0.03;
    };

    const calculateTabViewHeight = () => {
        const screenHeight = Dimensions.get('window').height;
        if (screenHeight > 800) {
            return 500;
        } else if (screenHeight > 550) {
            return 300;
        } else {
            return 150;
        }
    };

    return (
        <SafeAreaView
            edges={['top', 'left', 'right']}
            className="flex-1 bg-white"
        >
            <ScrollView
                className="flex-1 mt-8 "
                nestedScrollEnabled={true}
                showsVerticalScrollIndicator={false}
            >
                <View className="mx-[5%]">
                    <View className="">
                        <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: calculateResponsivePadding()
                            }}
                        />
                    </View>
                    <View className="">
                        <RecentlyBookedScrollView />
                    </View>
                </View>
                <View
                    className="flex-1"
                    style={{ height: calculateTabViewHeight() }}
                >
                    <TabViewComponent
                        titles={['已預約', '已完成']}
                        tabItems={dummyTabItems}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

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

export default BookingMenuPageComponent;