Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-07-12 13:43:24 +00:00
parent e2358e8e62
commit 90fd9c9c2b
+41 -8
View File
@@ -426,14 +426,47 @@ const PlansSection = () => {
<label className="block mb-1.5 text-sm font-semibold">
Stad <span className="text-primary">*</span>
</label>
<input
name="stad"
placeholder="t.ex. Stockholm"
value={form.stad}
onChange={handleChange}
aria-invalid={!!errors.stad}
className="w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30"
/>
<Popover open={cityOpen} onOpenChange={setCityOpen}>
<PopoverTrigger asChild>
<button
type="button"
role="combobox"
aria-expanded={cityOpen}
aria-invalid={!!errors.stad}
className={cn(
"w-full px-4 py-3 rounded-sm bg-background border border-border focus:outline-none focus:ring-2 focus:ring-primary/30 flex items-center justify-between text-left",
!form.stad && "text-muted-foreground"
)}
>
{form.stad || "Välj stad..."}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</button>
</PopoverTrigger>
<PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
<Command>
<CommandInput placeholder="Sök stad..." />
<CommandList>
<CommandEmpty>Ingen stad hittades.</CommandEmpty>
<CommandGroup>
{STORSTOCKHOLM_CITIES.map((city) => (
<CommandItem
key={city}
value={city}
onSelect={(v) => {
setForm((f) => ({ ...f, stad: v }));
setErrors((e) => ({ ...e, stad: "" }));
setCityOpen(false);
}}
>
<Check className={cn("mr-2 h-4 w-4", form.stad === city ? "opacity-100" : "opacity-0")} />
{city}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{errors.stad && (
<p className="text-destructive text-xs mt-1">{errors.stad}</p>
)}