feat(component): SearchPage

src/components/SearchPage.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
+import { List, Divider, Text, TouchableRipple, Searchbar } from 'react-native-paper';
+import { StyleSheet, View, ScrollView } from 'react-native';
+import { colors } from '../utils/color'
+import { useRoute } from '@react-navigation/native';
+export default function SearchPage({ navigation }) {
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const route = useRoute();
+    const { dummyData } = route.params;
+
+    const handleProjectSelect = (project) => {
+        console.log("project", project);
+        navigation.goBack()
+    };
+
+    const filteredData = dummyData.filter(item =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return (
+        <View style={styles.container}>
+            <Searchbar
+                mode='bar'
+                placeholder="Cari Project"
+                onChangeText={setSearchQuery}
+                value={searchQuery}
+                traileringIconColor={colors.white}
+                style={{ backgroundColor: colors.white }}
+                showDivider={true}
+                elevation={2}
+            />
+            <ScrollView style={styles.listData}>
+                <View>
+                    {filteredData.map(item => (
+                        <>
+                            <TouchableRipple onPress={() => handleProjectSelect(item)}>
+                                <List.Item
+                                    title={item.name}
+                                    right={() => <List.Icon icon="arrow-top-left" />}
+                                />
+                            </TouchableRipple>
+                        </>
+                    ))}
+                </View>
+            </ScrollView>
+        </View>
+    );
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: 50,
+        marginHorizontal: 10,
+
+    },
+    listData: {
+        flex: 1,
+        marginTop: 20,
+        marginHorizontal: 10
+    },
+});