pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 21:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement Combobox component and Autocomplete for Country

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 15:58:09 +00:00
parent 29f687b29e
commit 8b33a0d925
3 changed files with 301 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/search/SearchFilters.tsx
View File

@@ -8,6 +8,8 @@ import { Slider } from '@/components/ui/slider';
import { Badge } from '@/components/ui/badge';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ChevronDown, Filter, X } from 'lucide-react';
import { Combobox } from '@/components/ui/combobox';
import { useCountries, useStatesProvinces, useManufacturers, useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
export interface SearchFilters {
// Park filters
@@ -47,7 +49,13 @@ interface SearchFiltersProps {
export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }: SearchFiltersProps) {
const [isOpen, setIsOpen] = useState(false);
// Fetch autocomplete data
const { countries, loading: countriesLoading } = useCountries();
const { statesProvinces, loading: statesLoading } = useStatesProvinces(filters.country);
const { manufacturers, loading: manufacturersLoading } = useManufacturers();
const { headquarters, loading: headquartersLoading } = useCompanyHeadquarters();
const updateFilter = (key: keyof SearchFilters, value: any) => {
onFiltersChange({ ...filters, [key]: value });
};
@@ -145,19 +153,26 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Country</Label>
<Input
placeholder="Enter country"
value={filters.country || ''}
onChange={(e) => updateFilter('country', e.target.value || undefined)}
<Combobox
options={countries}
value={filters.country}
onValueChange={(value) => updateFilter('country', value || undefined)}
placeholder="Select country"
searchPlaceholder="Search countries..."
loading={countriesLoading}
/>
</div>
<div className="space-y-2">
<Label>State/Province</Label>
<Input
placeholder="Enter state/province"
value={filters.stateProvince || ''}
onChange={(e) => updateFilter('stateProvince', e.target.value || undefined)}
<Combobox
options={statesProvinces}
value={filters.stateProvince}
onValueChange={(value) => updateFilter('stateProvince', value || undefined)}
placeholder="Select state/province"
searchPlaceholder="Search states/provinces..."
loading={statesLoading}
disabled={!filters.country}
/>
</div>
</div>
@@ -273,6 +288,18 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
</div>
</div>
<div className="space-y-2">
<Label>Manufacturer</Label>
<Combobox
options={manufacturers}
value={filters.manufacturer}
onValueChange={(value) => updateFilter('manufacturer', value || undefined)}
placeholder="Select manufacturer"
searchPlaceholder="Search manufacturers..."
loading={manufacturersLoading}
/>
</div>
<div className="space-y-4">
<div className="space-y-2">
<div className="flex items-center justify-between">
@@ -343,10 +370,13 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
<div className="space-y-2">
<Label>Headquarters</Label>
<Input
placeholder="Enter country/location"
value={filters.headquarters || ''}
onChange={(e) => updateFilter('headquarters', e.target.value || undefined)}
<Combobox
options={headquarters}
value={filters.headquarters}
onValueChange={(value) => updateFilter('headquarters', value || undefined)}
placeholder="Select headquarters"
searchPlaceholder="Search headquarters..."
loading={headquartersLoading}
/>
</div>
</div>