[Frontend] Marc/frontend granular city/state geo proxy (#4156)

This commit is contained in:
Marc Kelechava
2025-12-01 18:25:08 -08:00
committed by GitHub
parent d0a9095b0d
commit 36c2af90b0
12 changed files with 636 additions and 76 deletions

View File

@@ -1,82 +1,31 @@
import { ProxyLocation } from "@/api/types";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "./ui/select";
geoTargetToProxyLocationInput,
proxyLocationToGeoTarget,
} from "@/util/geoData";
import { GeoTargetSelector } from "./GeoTargetSelector";
type Props = {
value: ProxyLocation | null;
value: ProxyLocation;
onChange: (value: ProxyLocation) => void;
className?: string;
};
function ProxySelector({ value, onChange, className }: Props) {
// Convert input (string enum or object) to GeoTarget for the selector
const geoTargetValue = proxyLocationToGeoTarget(value);
return (
<Select value={value ?? ""} onValueChange={onChange}>
<SelectTrigger className={className}>
<SelectValue placeholder="Proxy Location" />
</SelectTrigger>
<SelectContent>
<SelectItem value={ProxyLocation.Residential}>Residential</SelectItem>
<SelectItem value={ProxyLocation.ResidentialISP}>
Residential ISP (US)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialAR}>
Residential (Argentina)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialAU}>
Residential (Australia)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialBR}>
Residential (Brazil)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialCA}>
Residential (Canada)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialFR}>
Residential (France)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialDE}>
Residential (Germany)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialIN}>
Residential (India)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialIE}>
Residential (Ireland)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialIT}>
Residential (Italy)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialJP}>
Residential (Japan)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialMX}>
Residential (Mexico)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialNL}>
Residential (Netherlands)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialNZ}>
Residential (New Zealand)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialZA}>
Residential (South Africa)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialES}>
Residential (Spain)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialTR}>
Residential (Turkey)
</SelectItem>
<SelectItem value={ProxyLocation.ResidentialGB}>
Residential (United Kingdom)
</SelectItem>
</SelectContent>
</Select>
<GeoTargetSelector
className={className}
value={geoTargetValue}
onChange={(newTarget) => {
// Convert back to ProxyLocation enum if possible (for simple countries)
// or keep as GeoTarget object
const newValue = geoTargetToProxyLocationInput(newTarget);
onChange(newValue);
}}
/>
);
}