Guest search resultsblocks-guest
Search results page with a search bar, filters, sort, list and map views, empty and loading states, all kept in the URL.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/guest-search-results의존 아이템booking-search-barbuttondate-inputfilter-barimagelocalemap-pinnative-selectpage-statepricesegmented-controlstyle
전체 화면 데모/search
Default
guest-search-results-demo.tsx
"use client";
import * as React from "react";import type { BookingSearch } from "@/lib/booking-search";import type { FilterValue } from "@/components/ui/filter-bar";import { GuestSearchResults } from "@/components/guest-search-results-view";import type { ResultView, SortKey } from "@/components/guest-search-results-model";import { guestSearchDestinations, guestSearchFacets, guestSearchResults } from "@/lib/guest-search-results-data";
export default function GuestSearchResultsDemo() { const [search, setSearch] = React.useState<BookingSearch>({ destination: "", checkIn: "", checkOut: "", guests: { adults: 2, children: 0 } }); const [filters, setFilters] = React.useState<FilterValue>({}); const [sort, setSort] = React.useState<SortKey>("recommended"); const [view, setView] = React.useState<ResultView>("list"); return ( <GuestSearchResults search={search} onSearchChange={setSearch} destinations={guestSearchDestinations} results={guestSearchResults} status="ready" facets={guestSearchFacets} filters={filters} onFiltersChange={setFilters} sort={sort} onSortChange={setSort} view={view} onViewChange={setView} mobile={false} /> );}