;\n}\n\nexport function AutocompleteInput(\n { value, onChange, placeholder, icon: Icon }: {\n value: string;\n onChange: (value: string) => void;\n placeholder: string;\n icon: any;\n },\n) {\n const [isOpen, setIsOpen] = useState(false);\n const [inputValue, setInputValue] = useState(value);\n const [predictions, setPredictions] = useState([]);\n const autocompleteService = useRef(null);\n const inputRef = useRef(null);\n useEffect(() => {\n loadGoogleMapsAPI().then(() => {\n if (window.google && window.google.maps && window.google.maps.places) {\n autocompleteService.current = new window.google.maps.places.AutocompleteService();\n } else {\n console.error(\"Google Maps Places library not loaded\");\n }\n }).catch((error) => {\n console.error(\"Error loading Google Maps API:\", error);\n });\n }, []);\n\n useEffect(() => {\n setInputValue(value);\n }, [value]);\n\n const fetchPredictions = useCallback(\n debounce((input) => {\n if (input.length > 0 && autocompleteService.current) {\n autocompleteService.current.getPlacePredictions(\n { input },\n (results, status) => {\n if (status === window.google.maps.places.PlacesServiceStatus.OK) {\n setPredictions(results);\n } else {\n console.error(\"Error fetching place predictions:\", status);\n setPredictions([]);\n }\n },\n );\n } else {\n setPredictions([]);\n }\n }, 300),\n [],\n );\n\n const handleInputChange = (e) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n fetchPredictions(newValue);\n if (newValue === \"\") {\n onChange(\"\");\n }\n };\n\n const handleOptionSelect = (place) => {\n setInputValue(place.description);\n onChange(place.description);\n setPredictions([]);\n setIsOpen(false);\n };\n\n return (\n

\n {Icon && (\n

\n \n

\n )}\n setIsOpen(true)}\n onBlur={() => setTimeout(() => setIsOpen(false), 200)}\n placeholder={placeholder}\n className={`w-full p-2 ${\n Icon ? \"pl-10\" : \"\"\n } border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-100`}\n />\n

\n {isOpen && predictions.length > 0 && (\n

handleOptionSelect(prediction)}\n className=\"px-4 py-2 hover:bg-gray-100 cursor-pointer\"\n >\n {prediction.description}\n \n ))}\n

\n )}\n

\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/vawogbemi/notUberMapComponent/code/main.tsx","extension","actionData","errors"]