crazycharge-app/component/searchPage/searchPageComponent.tsx

import { ScrollView, Text, View, StyleSheet, Pressable } from 'react-native';
import NormalInput from '../global/normal_input';
import NormalButton from '../global/normal_button';
import { FlashList } from '@shopify/flash-list';
import { ArrowIconSvg } from '../global/SVG';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useEffect, useRef } from 'react';
import { router } from 'expo-router';

interface BookingHistory {
    charingStationName: string;
    chargingStationAddress: string;
}

interface SearchPageComponentProps {}

const bookingHistoryData: BookingHistory[] = [
    {
        charingStationName: '充電站#1',
        chargingStationAddress: '充電站地址#1'
    },
    {
        charingStationName: '充電站#2',
        chargingStationAddress: '充電站地址#2'
    },
    {
        charingStationName: '充電站#3',
        chargingStationAddress: '充電站地址#3'
    },
    {
        charingStationName: '充電站#4',
        chargingStationAddress: '充電站地址#4'
    }
];

const SearchPageComponent: React.FC<SearchPageComponentProps> = () => {
    const inputRef = useRef(null);

    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    }, []);

    return (
        <SafeAreaView className="flex-1 bg-white">
            <ScrollView className=" flex-1 px-[5%] pt-6 ">
                <View className="flex-column gap-4 ">
                    <View className=" flex-1 flex-row ">
                        <Pressable
                            style={styles.leftArrowBackButton}
                            onPress={() => {
                                if (router.canGoBack()) {
                                    router.back();
                                } else {
                                    router.replace('/(auth)/(tabs)/(home)');
                                }
                            }}
                        >
                            <ArrowIconSvg />
                        </Pressable>
                        <NormalInput
                            placeholder="搜尋這裡"
                            onChangeText={(abc) => console.log(abc)}
                            extendedStyle={styles.textInput}
                            ref={inputRef}
                        />
                    </View>
                    <ScrollView
                        horizontal={true}
                        className="space-x-4"
                        showsHorizontalScrollIndicator={false}
                    >
                        <View>
                            <NormalButton
                                title={
                                    <Text style={{ color: '#061E25' }}>
                                        附近的充電站
                                    </Text>
                                }
                                onPress={() => console.log('附近的充電站')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View>
                        <View>
                            <NormalButton
                                title={
                                    <Text style={{ color: '#061E25' }}>
                                        可Walk-in的充電站
                                    </Text>
                                }
                                onPress={() => console.log('可Walk-in的充電站')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View>
                        <View>
                            <NormalButton
                                title={
                                    <Text style={{ color: '#061E25' }}>
                                        Test Tab #1
                                    </Text>
                                }
                                onPress={() => console.log('Test Tab #1')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View>
                        <View>
                            <NormalButton
                                title={
                                    <Text style={{ color: '#061E25' }}>
                                        Test Tab #2
                                    </Text>
                                }
                                onPress={() => console.log('Test Tab #2')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View>
                    </ScrollView>
                    <View>
                        <Text
                            style={{
                                fontWeight: 400,
                                fontSize: 16,
                                color: '#222222',
                                paddingTop: 6
                            }}
                        >
                            預約記錄
                        </Text>
                        <FlashList
                            estimatedItemSize={10}
                            data={bookingHistoryData}
                            renderItem={({ item }) => (
                                <View className="flex-column space-y-1 py-4 border-b border-gray-300">
                                    <Text className="text-base text-[#222222]">
                                        {item.charingStationName}
                                    </Text>
                                    <Text className="text-base text-[#888888]">
                                        {item.chargingStationAddress}
                                    </Text>
                                </View>
                            )}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default SearchPageComponent;

const styles = StyleSheet.create({
    leftArrowBackButton: {
        width: '15%',
        maxWidth: '100%',
        fontSize: 16,
        padding: 20,
        paddingLeft: 30,
        borderBottomLeftRadius: 12,
        borderTopLeftRadius: 12,
        borderColor: '#bbbbbb',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderLeftWidth: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    textInput: {
        width: '85%',
        maxWidth: '100%',
        fontSize: 16,
        padding: 20,
        paddingLeft: 0,
        borderLeftWidth: 0,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderRightWidth: 1,
        borderBottomRightRadius: 12,
        borderTopRightRadius: 12,
        borderRadius: 0,
        borderColor: '#bbbbbb'
    }
});