Booking search barhospitality
Destination, stay dates and guests with one Search button that commits the draft, a full-screen sheet on mobile and URL helpers.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/booking-search-bar의존 아이템accordionbuttoncomboboxdate-inputguest-pickerlocalesearch-summarysheetstay-date-range-pickerstyle
Default
booking-search-bar-demo.tsx
"use client";
import * as React from "react";import { useProviderToday } from "@/hooks/use-calendar-props";import { searchToParams, type BookingSearch } from "@/lib/booking-search";import { BookingSearchBar } from "@/components/ui/booking-search-bar";
const destinations = [ { value: "lisbon", label: "Lisbon", description: "Portugal" }, { value: "porto", label: "Porto", description: "Portugal" }, { value: "seville", label: "Seville", description: "Spain" },];
export default function BookingSearchBarDemo() { const today = useProviderToday(); const [query, setQuery] = React.useState(""); const onSearch = (value: BookingSearch) => setQuery(searchToParams(value, { today, destinations }).toString()); return ( <div className="flex flex-col gap-3"> <BookingSearchBar destinations={destinations} onSearch={onSearch} mobile={false} /> <output data-slot="booking-search-query" className="text-sm text-muted-foreground"> {query} </output> </div> );}