crazycharge-app/component/homePage/homePage.tsx

import { View, Text, ScrollView, FlatList } from 'react-native';
import NormalButton from '../global/normal_button';

import NormalInput from '../global/normal_input';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import RecentlyBookedScrollView from '../global/recentlyBookedScrollView';
import { BellIconSvg, HomeIconSvg } from '../global/SVG';
import { AuthContext } from '../../context/AuthProvider';
import { useContext, useEffect } from 'react';
interface HomePageProps {}

const HomePage: React.FC<HomePageProps> = () => {
    const { user } = useContext(AuthContext);

    return (
        <SafeAreaView
            edges={['top', 'left', 'right']}
            className="flex-1 bg-white"
        >
            <ScrollView
                showsVerticalScrollIndicator={false}
                className="flex-1 mx-[5%] mt-8 "
            >
                <View className="">
                    <View className="flex-row items-center pb-4">
                        <HomeIconSvg />
                        <View className="pl-2 flex-1 flex-column ">
                            <View className="flex-row justify-between">
                                <Text className="text-lg pb-1">你好！</Text>
                                <BellIconSvg />
                            </View>
                            <Text className="text-4xl font-light ">
                                {user?.nickname}
                            </Text>
                        </View>
                    </View>
                    <NormalInput
                        placeholder="搜尋充電站或地區"
                        onChangeText={() => console.log('abc')}
                    />
                </View>

                {/* ************************近期預約過************************ */}
                <RecentlyBookedScrollView />
                {/* ************************Bottom Button Groups************************ */}
                <View className="">
                    <View className=" mb-4">
                        <NormalButton
                            onPress={() => console.log('掃瞄及充電')}
                            title={
                                <Text className="text-white font-bold text-lg">
                                    掃瞄及充電
                                </Text>
                            }
                            extendedStyle={{
                                alignItems: 'flex-start',
                                padding: 24
                            }}
                        />
                    </View>
                    <View className="flex-1 flex-row justify-between gap-6">
                        <View className="flex-1">
                            <NormalButton
                                onPress={() =>
                                    router.push('bookingMenuPage')
                                }
                                title={
                                    <Text className="text-white font-bold text-lg">
                                        我的預約
                                    </Text>
                                }
                                extendedStyle={{
                                    alignItems: 'flex-start',
                                    padding: 24
                                }}
                            />
                        </View>
                        <View className="flex-1">
                            <NormalButton
                                onPress={() => router.push('myVehiclePage')}
                                title={
                                    <Text className="text-white font-bold text-lg">
                                        我的車輛
                                    </Text>
                                }
                                extendedStyle={{
                                    alignItems: 'flex-start',
                                    padding: 24
                                }}
                            />
                        </View>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};
export default HomePage;