Property Search

{/* <PandaOpen value={{ listing: { mode: "panel" } }}> in app/site-shell.tsx (or open={{ listing: { mode: "panel" } }} on the root). app/globals.css: .search-panel { position: absolute; top: 1rem; bottom: 1rem; left: 1rem; width: 40rem; overflow: hidden } */}
<PropertySearchRoot initialData={initialData} searchPath="/search" scrollContainer=".search-panel-list">
  <SearchMap avoid=".search-panel" className={hostClass("absolute inset-0 h-full w-full")} />
  <aside className={hostClass("search-panel rounded-card bg-background shadow-raised")}>
    <SearchPanel>
      <SearchPanelList className="search-panel-list">
        <SearchResultsHeader sticky compact countLabel="{n} homes" />
        <SearchResults layout="list" inset="none" />
      </SearchPanelList>
      <SearchPanelDetail design={{ gallery: { variant: "carousel" }, map: { nearby: true } }}>
        <SearchPanelBack />
        <PropertyDetailGallery />
        <div className="flex flex-col gap-4 p-5">
          <PropertyDetailHeading compact />
          <PropertyDetailActions />
          <PropertyDetailSections />
          <PropertyCompliance />
        </div>
      </SearchPanelDetail>
    </SearchPanel>
  </aside>
</PropertySearchRoot>

<PropertySearchRoot initialData={initialData} searchPath="/search">
  <SearchMap
    className="h-160"
    schools={false}
    look={{ preset: "minimal" }}
    draw={{ modes: ["polygon", "radius"], controls: "bottom-center", banner: "bottom", stroke: "#0b6e78", fillOpacity: 0.18, weight: 3, dash: true, labels: { drawOnMap: "Draw your area" } }}
  />
</PropertySearchRoot>
// Site-wide instead: DESIGN.md `map: { preset: minimal, shape: { stroke: "{colors.primary}", dash: true }, banner: { bg: "{colors.primary}", radius: 12px } }`.

{/* app/globals.css: .search-panel { overflow-y: auto; padding: 0 1.25rem 1.25rem; } */}
<PropertySearchRoot initialData={initialData} searchPath="/search" scrollContainer=".search-panel">
  <aside className={hostClass("search-panel rounded-card bg-background shadow-raised")}>
    <SearchResultsHeader sticky compact countLabel="{n} homes" sort={<FilterSort variant="text" prefix={false} />} />
    <SearchResults layout="list" inset="none" disclaimers="inline" skeleton={<MyRowSkeleton />} skeletonCount={6} />
  </aside>
</PropertySearchRoot>

<PropertySearchRoot initialData={initialData} searchPath="/search">
  <SearchResultsHeader compact countLabel="{n} homes" sort={<FilterSort variant="text" prefix={false} />} />
  <SearchResults layout="list" menuItems={["like", "collection", "share", "mortgage", "video", "sheet"]} disclaimers="inline" />
</PropertySearchRoot>

{/* app/globals.css: .search-stage { position: relative; height: calc(100dvh - <header height>); overflow: hidden }
    .search-panel { position: absolute; top: 1rem; bottom: 1rem; left: 1rem; z-index: 10; width: 40rem; overflow-y: auto } */}
<PropertySearchRoot initialData={initialData} searchPath="/search" columns={2}>
  {/* Search box with the all-filters trigger INSIDE its pill (slot, never an absolute overlay). */}
  <FilterLocation className={hostClass("hidden lg:block")}>
    <FilterMore><span className={hostClass("inline-flex h-8 items-center rounded-pill bg-inverse px-3.5 text-inverse-foreground")}>Filters</span></FilterMore>
  </FilterLocation>
  <div className={hostClass("search-stage hidden lg:block")}>
    {/* avoid: the camera frames the results in the area the panel leaves free. */}
    <SearchMap avoid=".search-panel" className={hostClass("absolute inset-0 h-full w-full")} />
    <aside className={hostClass("search-panel rounded-card bg-background p-5 shadow-raised")}>
      <SearchResultsHeader />
      <SearchResults />
    </aside>
    <div className={hostClass("absolute right-4 bottom-6 z-10")}><FilterSaveSearch /></div>
  </div>
  <SearchMobile />
</PropertySearchRoot>

<PropertySearchRoot initialData={initialData} searchPath="/search" columns={2}>
  {/* self-start lets the sticky columns stick; the results take 2 of 4 columns so the cards stay wide. */}
  <div className="hidden lg:grid lg:grid-cols-4 lg:gap-6 lg:px-6">
    <SearchFilters className="sticky top-24 flex-col items-start self-start" />
    <div className="lg:col-span-2"><SearchResultsHeader /><SearchResults /></div>
    <SearchMap className="sticky top-24 h-160 self-start" />
  </div>
  <SearchMobile />
</PropertySearchRoot>
// Sizes: spacing tokens (h-160) or the site's DESIGN.md values; the design lint rejects arbitrary values like h-[calc(...)].

<PropertySearchRoot initialData={initialData} searchPath="/search" columns={2}>
  <div className="hidden lg:grid lg:grid-cols-[320px_1fr] lg:gap-8 lg:px-6">
    <aside className="sticky top-24 flex flex-col gap-8 self-start">
      <FilterLocation />
      <FilterSaleRent />
      <FilterPrice variant="inline" />
      <FilterBedsBaths variant="inline" />
      <FilterType variant="inline" />
      <FilterMore />
    </aside>
    <main><div className="flex justify-between"><SearchResultsHeader /><FilterSaveSearch /></div><SearchResults /></main>
  </div>
  <SearchMobile />
</PropertySearchRoot>

"use client"
import { useSearchFilter } from "@pandaidx/widgets/client"

export const PoolChip = () => {
  const pool = useSearchFilter("pool")
  const on = pool.value === true || pool.value === "true"
  return <button type="button" aria-pressed={on} onClick={() => (on ? pool.clear() : pool.set(true))}>Pool</button>
}

"use client"
import Image from "next/image"
import { FilterLocation, FilterSaveSearch, SearchDisclaimers, SearchMap, useListingActions, usePropertySearch, useSearchFilter, type SearchResultListing } from "@pandaidx/widgets/client"

const SaleRent = () => {
  const group = useSearchFilter("group")
  return (
    <div role="group" aria-label="Sale or rent" className="flex gap-1">
      {(["sale", "rent"] as const).map((value) => (
        <button key={value} type="button" aria-pressed={(group.value ?? "sale") === value} onClick={() => group.set(value)} className="h-10 rounded-full border px-4">
          {value === "sale" ? "For Sale" : "For Rent"}
        </button>
      ))}
    </div>
  )
}

const SortSelect = () => {
  const { sortOptions } = usePropertySearch()
  const sort = useSearchFilter("sort")
  return (
    <select aria-label="Sort" value={String(sort.value ?? "-listdate")} onChange={(event) => sort.set(event.target.value)} className="h-10 rounded-full border px-4">
      {sortOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
    </select>
  )
}

const ResultCard = ({ card }: { card: SearchResultListing }) => {
  const { highlight, highlighted } = usePropertySearch()
  const actions = useListingActions(card)
  return (
    <article onPointerEnter={() => highlight(card.markerKey)} onPointerLeave={() => highlight(false)} data-active={highlighted === card.markerKey || undefined}>
      <button type="button" onClick={actions.openDetail} className="block w-full text-left">
        <div className="relative aspect-[4/3] overflow-hidden rounded-card bg-muted">
          {card.photos[0] ? <Image src={card.photos[0]} alt={card.address} fill sizes="(min-width: 1024px) 25vw, 50vw" className="object-cover" /> : null}
        </div>
        <p className="mt-3 text-xl">{card.price}</p>
        <p>{card.address}</p>
        <p className="text-sm opacity-70">{[card.beds != null && `${card.beds} Beds`, card.baths != null && `${card.baths} Baths`].filter(Boolean).join(" · ")}</p>
        {card.courtesy ? <p className="mt-1 text-xs opacity-60">{card.courtesy}</p> : null}
      </button>
    </article>
  )
}

export const SearchView = () => {
  const { cards, total, loading, page, pageCount, goToPage } = usePropertySearch()
  return (
    <>
      <div className="flex flex-wrap items-center gap-2 px-6 py-3">
        <FilterLocation className="w-80" />
        <SaleRent />
        <SortSelect />
        <FilterSaveSearch />
      </div>
      <div className="grid lg:grid-cols-[1fr_480px]">
        <section className="px-6" aria-busy={loading}>
          <p data-panda-count="">{total.toLocaleString()} homes</p>
          <div className="grid gap-6 sm:grid-cols-2">{cards.map((card) => <ResultCard key={card.markerKey} card={card} />)}</div>
          <nav className="my-8 flex justify-between">
            <button type="button" disabled={page <= 0} onClick={() => goToPage(page - 1)}>Previous</button>
            <button type="button" disabled={page + 1 >= pageCount} onClick={() => goToPage(page + 1)}>Next</button>
          </nav>
          <SearchDisclaimers />
        </section>
        <SearchMap className="sticky top-24 h-[calc(100dvh-6rem)]" />
      </div>
    </>
  )
}
// app/search/page.tsx: <PropertySearchRoot initialData={initialData} searchPath="/search"><SearchView /></PropertySearchRoot>

const Results = () => {
  const { listings, loading, page, pageCount, goToPage } = usePropertySearch()
  if (loading) return <p>Loading…</p>
  return (
    <>
      <div className="grid gap-6 md:grid-cols-3">{listings.map((l, i) => <ListingCard key={String(l._id ?? l.ListingId)} listing={l} index={i} />)}</div>
      <button disabled={page + 1 >= pageCount} onClick={() => goToPage(page + 1)}>Next</button>
      <SearchDisclaimers />
    </>
  )
}