Place Of Birth Dropdown Selection
/**
* Get location suggestions as user types
*/
export async function getLocationSuggestions(query: string): Promise<Array<{
displayName: string;
lat: number;
lon: number;
}>> {
if (!query || query.length < 3) {
return [];
}
try {
const nominatimUrl = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(
query
)}&format=json&limit=5&addressdetails=1`;
const response = await fetch(nominatimUrl, {
headers: {
'User-Agent': 'AstrologyApp/1.0',
},
});
if (!response.ok) {
throw new Error('Failed to fetch suggestions');
}
const data = await response.json();
return data.map((item: any) => ({
displayName: item.display_name,
lat: parseFloat(item.lat),
lon: parseFloat(item.lon),
}));
} catch (error) {
console.error('Location suggestion error:', error);
return [];
}
}
import { getCoordinates, getLocationSuggestions } from './utils/geocoding';
const [locationSuggestions, setLocationSuggestions] = useState<Array<{
displayName: string;
lat: number;
lon: number;
}>>([]);
const [showSuggestions, setShowSuggestions] = useState(false);
const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
const handlePlaceInputChange = async (value: string) => {
setBirthDetails({ ...birthDetails, placeOfBirth: value });
if (value.length >= 3) {
setIsLoadingSuggestions(true);
setShowSuggestions(true);
try {
const suggestions = await getLocationSuggestions(value);
setLocationSuggestions(suggestions);
} catch (error) {
console.error('Error fetching suggestions:', error);
setLocationSuggestions([]);
} finally {
setIsLoadingSuggestions(false);
}
} else {
setLocationSuggestions([]);
setShowSuggestions(false);
}
};
const handleSelectSuggestion = (suggestion: { displayName: string; lat: number; lon: number }) => {
setBirthDetails({ ...birthDetails, placeOfBirth: suggestion.displayName });
setLocationSuggestions([]);
setShowSuggestions(false);
};
{/* Place of Birth - Green Theme */}
<div className="md:col-span-2 group">
<label className="flex items-center gap-2 text-xs font-bold text-gray-800 mb-1.5">
<div className="w-6 h-6 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center shadow-md group-hover:scale-110 transition-transform">
<span className="text-sm">📍</span>
</div>
<span className="text-sm">Place of Birth</span>
<span className="text-red-500">*</span>
</label>
<input
type="text"
required
value={birthDetails.placeOfBirth}
onChange={(e) => setBirthDetails({ ...birthDetails, placeOfBirth: e.target.value })}
placeholder="City, State, Country"
className="w-full px-4 py-2.5 bg-gradient-to-r from-green-50 to-emerald-100 border-2 border-green-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-green-500 focus:shadow-lg transition-all text-gray-900 placeholder:text-green-400 font-medium text-sm hover:shadow-md"
/>
</div>