created search page as per figma design

app/index.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 
 // import MultiStepForm from '../component/registrationMultiStepForm/multi_step_form';
 import BookingMenuPage from '../component/bookingMenuPage/bookingMenuPage';
+import SearchPage from '../component/searchPage/searchPage';
 // import HomePage from '../component/homePage/homePage';
 
 export default function Index() {
@@ -14,8 +15,8 @@ export default function Index() {
 
             {/* <MultiStepForm /> */}
 
-            <BookingMenuPage />
-
+            {/* <BookingMenuPage /> */}
+            <SearchPage />
             {/* <HomePage /> */}
         </View>
     );

component/searchPage/searchPage.tsx

@@ -0,0 +1,202 @@
+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'
+    }
+});