crazycharge-app/component/homePage/homePage.tsx

import { View, Text, ScrollView, FlatList, Pressable } from 'react-native';
import NormalButton from '../global/normal_button';
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 } 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%] "
            >
                <View className="pt-8">
                    <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>
                    <View className=" flex-1 justify-center ">
                        <Pressable onPress={() => router.push('searchPage')}>
                            <View
                                style={{
                                    borderWidth: 1,
                                    padding: 24,
                                    borderRadius: 12,
                                    borderColor: '#bbbbbb',
                                    maxWidth: '100%'
                                }}
                            >
                                <Text
                                    style={{ color: '#888888', fontSize: 16 }}
                                >
                                    搜尋充電站或地區..
                                </Text>
                            </View>
                        </Pressable>
                    </View>
                </View>

                {/* ************************近期預約過************************ */}
                <RecentlyBookedScrollView />
                {/* ************************Bottom Button Groups************************ */}
                <View className="">
                    <View className=" mb-4">
                        <NormalButton
                            // onPress={() => console.log('掃瞄及充電')}
                            onPress={() => router.push('scanQrPage')}
                            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;