"use client"; import { useRouter } from "next/navigation"; import type { FormEvent } from "react"; import { useCallback, useState } from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Field, FieldLabel } from "@/components/registry/primitives/core/field"; import { Input } from "@/components/registry/primitives/core/input"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { cn } from "@/lib/registry/cn"; export type SearchBarVariant = "default" | "medium" | "large" | "input-only"; export interface SearchBarProps { action?: string; placeholder?: string; className?: string; variant?: SearchBarVariant; inputName?: string; inputId?: string; submitLabel?: string; value?: string; defaultValue?: string; onQueryChange?: (query: string) => void; onSubmit?: (query: string) => void; } const mediumFilterOptions = { continent: ["Any continent", "Europe", "Asia", "North America", "Africa"], itemType: ["Any type", "City", "Beach", "Mountain", "Cultural"], activity: ["Any activity", "Relaxation", "Adventure", "Food", "History"], }; /** Resolve the effective query: the named input, then `from`/`to`. */ function resolveQueryFromForm(formData: FormData, inputName: string): string { const queryValue = formData.get(inputName); const fromValue = formData.get("from"); const toValue = formData.get("to"); return ( (typeof queryValue === "string" && queryValue.trim()) || (typeof fromValue === "string" && fromValue.trim()) || (typeof toValue === "string" && toValue.trim()) || "" ); } /** Focus the first present query-ish input so the validation error lands * on a visible control. */ function focusFallbackInput(form: HTMLFormElement, inputName: string): void { const fallbackInput = form.querySelector(`input[name='${inputName}']`) ?? form.querySelector("input[name='from']") ?? form.querySelector("input[name='to']"); fallbackInput?.focus(); } /** Build the search querystring from all non-empty string fields, * guaranteeing a `q` entry. */ function buildSearchParams(formData: FormData, query: string): URLSearchParams { const params = new URLSearchParams(); for (const [key, rawValue] of formData.entries()) { if (typeof rawValue !== "string") continue; const trimmed = rawValue.trim(); if (!trimmed) continue; params.set(key, trimmed); } if (!params.has("q")) { params.set("q", query); } return params; } export function SearchBar({ action = "/search", placeholder = "Search...", className, variant = "default", inputName = "q", inputId, submitLabel = "Search", value, defaultValue, onQueryChange, onSubmit, }: SearchBarProps) { const router = useRouter(); const [validationMessage, setValidationMessage] = useState(""); const [continent, setContinent] = useState(""); const [itemType, setItemType] = useState(""); const [activity, setActivity] = useState(""); const [from, setFrom] = useState(""); const [to, setTo] = useState(""); const [departDate, setDepartDate] = useState(""); const [returnDate, setReturnDate] = useState(""); const [passengers, setPassengers] = useState("1"); const resolvedInputId = inputId ?? `search-bar-${variant}-${inputName}`; const isInputOnlyVariant = variant === "input-only"; const handleSubmit = useCallback( (event: FormEvent) => { event.preventDefault(); const form = event.currentTarget; const formData = new FormData(form); const query = resolveQueryFromForm(formData, inputName); if (!query) { setValidationMessage("Please enter a search term."); focusFallbackInput(form, inputName); return; } setValidationMessage(""); if (onSubmit) { onSubmit(query); return; } if (action) { const params = buildSearchParams(formData, query); router.push(`${action}?${params.toString()}`); } }, [action, inputName, onSubmit, router], ); const handleInput = useCallback(() => { if (validationMessage) { setValidationMessage(""); } }, [validationMessage]); if (variant === "medium") { return ( // biome-ignore lint/a11y/useSemanticElements: search landmark on the

; the native element lacks the form-submit semantics this control needs.

Search onQueryChange?.(event.target.value)} /> Continent Type Activity

); } if (variant === "large") { return ( // biome-ignore lint/a11y/useSemanticElements: search landmark on the

; the native element lacks the form-submit semantics this control needs.

From setFrom(event.target.value)} placeholder="Departure city" /> To setTo(event.target.value)} placeholder="Destination city" /> Departure setDepartDate(event.target.value)} /> Return setReturnDate(event.target.value)} /> Passengers

); } return ( // biome-ignore lint/a11y/useSemanticElements: search landmark on the

; the native element lacks the form-submit semantics this control needs. Search {isInputOnlyVariant ? (

onQueryChange?.(event.target.value)} />

) : ( onQueryChange?.(event.target.value)} /> )} {!isInputOnlyVariant ? ( ) : null}

{/* When there's no validation message, render an empty alert rather than placeholder copy — the previous "Search validation message" fallback leaked to AT users via the sr-only class (the element is hidden visually but still announced through role=alert). */} {validationMessage}

); } export default SearchBar;

Blocks Search Bar

Showcase

Blocks Search Bar