Changes
Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user