import React, { useState, useEffect } from ‘react’;
import { ChevronDown, ChevronUp } from ‘lucide-react’;
const LocationPicker = () => {
// Sample data structure – in a real app, you would fetch this from an API
const locationData = {
“Cumbria”: [“Arthuret”, “Bewcastle”, “Brampton”, “Carlisle”],
“Devon”: [“Ashburton”, “Bickleigh”, “Crediton”, “Exeter”],
“Lancashire”: [“Blackburn”, “Burnley”, “Lancaster”, “Preston”],
“Suffolk”: [“Aldeburgh”, “Beccles”, “Ipswich”, “Lowestoft”]
};
const [isOpen, setIsOpen] = useState(false);
const [counties, setCounties] = useState(Object.keys(locationData));
const [selectedCounty, setSelectedCounty] = useState(”);
const [parishes, setParishes] = useState([]);
const [selectedParish, setSelectedParish] = useState(”);
const [isLoading, setIsLoading] = useState(false);
// Update parishes when county selection changes
useEffect(() => {
if (selectedCounty) {
setIsLoading(true);
// Simulate API call delay
setTimeout(() => {
setParishes(locationData[selectedCounty] || []);
setSelectedParish(”);
setIsLoading(false);
}, 300);
} else {
setParishes([]);
setSelectedParish(”);
}
}, [selectedCounty]);
const handleCountyChange = (e) => {
setSelectedCounty(e.target.value);
};
const handleParishChange = (e) => {
setSelectedParish(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
if (selectedCounty && selectedParish) {
alert(`You selected: ${selectedParish}, ${selectedCounty}`);
setIsOpen(false); // Collapse after selection
// Here you would typically save the selection or navigate to another page
}
};
const toggleOpen = () => {
setIsOpen(!isOpen);
};
return (
Vali asukoht
{selectedCounty && selectedParish && !isOpen ? (
) : (
)}
{selectedCounty && selectedParish && !isOpen && (
Klõpsa asukoha muutmiseks
)}
{isOpen && (
)}
);
};
export default LocationPicker;