add upload and search implemented

components/Search.tsx

@@ -1,8 +1,35 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { View, TextInput, TouchableOpacity, Image } from 'react-native';
 import icons from '@/constants/icons';
 
-const Search = () => {
+interface Props {
+  onSearch: (query: string) => void;
+}
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+const Search = ({ onSearch }: Props) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedQuery = useDebounce(searchQuery);
+
+  React.useEffect(() => {
+    onSearch(debouncedQuery);
+  }, [debouncedQuery]);
+
   return (
     <View className="flex-row items-center bg-gray-100 rounded-full px-4 py-2">
       <Image source={icons.search} className="w-5 h-5 mr-2" />
@@ -10,12 +37,17 @@ const Search = () => {
         placeholder="Search cars..."
         className="flex-1"
         placeholderTextColor="#666"
+        value={searchQuery}
+        onChangeText={setSearchQuery}
       />
-      <TouchableOpacity>
-        <Image source={icons.filter} className="w-5 h-5" />
-      </TouchableOpacity>
+      {searchQuery ? (
+        <TouchableOpacity onPress={() => setSearchQuery('')}>
+          <Image source={icons.backArrow} className="w-5 h-5" />
+        </TouchableOpacity>
+      ) : null}
     </View>
   );
 };
+    
 
 export default Search;