crazycharge-app/component/searchPage/searchPage.tsx

import { ScrollView, Text, View, StyleSheet, Pressable } from 'react-native';
import NormalInput from '../global/normal_input';
import Svg, { Path } from 'react-native-svg';

import NormalButton from '../global/normal_button';
import { FlashList } from '@shopify/flash-list';

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

interface SearchPageProps {}

const ArrowIconSvg = () => (
    <Svg width="8" height="12" viewBox="0 0 8 12" fill="none">
        <Path
            d="M0.6 6L6.6 -6.11959e-08L8 1.4L3.4 6L8 10.6L6.6 12L0.6 6Z"
            fill="#888888"
        />
    </Svg>
);

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

const SearchPage: React.FC<SearchPageProps> = () => {
    return (
        <ScrollView className="bg-[#ffffff] flex-1 h-[100vh] px-[5%] pt-[5%] ">
            <View className="flex-column gap-4 ">
                <View className=" flex-1 flex-row ">
                    <Pressable
                        style={styles.leftArrowBackButton}
                        onPress={() => console.log('Back Button')}
                    >
                        <ArrowIconSvg />
                    </Pressable>
                    <NormalInput
                        placeholder="搜尋這裡"
                        onChangeText={(abc) => console.log(abc)}
                        extendedStyle={styles.textInput}
                    />
                </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>
    );
};

export default SearchPage;

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'
    }
});