Condo Directory

// app/condos/page.tsx (server): const data = await fetchPandaCondoDirectory({ publicKey, apiUrl, searchParams: await searchParams })
"use client"
import { DirectoryFilterBar, DirectoryMap, DirectoryResults, DirectoryResultsHeader, PandaDirectoryRoot, type PandaDirectoryData } from "@pandaidx/widgets/client"

// The websites desktop layout: sticky filter bar, results 60% on the left, the map 40% sticky to the right edge.
export const CondosView = ({ data }: { data: PandaDirectoryData }) => (
  <PandaDirectoryRoot data={data}>
    <DirectoryFilterBar />
    <div className="flex">
      <div className="w-[60%]">
        <DirectoryResultsHeader />
        <DirectoryResults />
      </div>
      <div className="sticky top-[var(--site-header-height,104px)] h-[calc(100dvh-var(--site-header-height,104px))] w-[40%] pb-4 pr-3">
        <div className="size-full overflow-hidden rounded-card">
          <DirectoryMap />
        </div>
      </div>
    </div>
  </PandaDirectoryRoot>
)

// app/condos/page.tsx (server): const data = await fetchPandaCondoDirectory({ publicKey, apiUrl, searchParams: await searchParams })
"use client"
import Image from "next/image"
import Link from "next/link"
import { DirectoryFilterBar, DirectoryMap, DirectoryResults, DirectoryResultsHeader, PandaDirectoryRoot, type DirectoryCardContext, type PandaDirectoryData, type SiteBuildingCard } from "@pandaidx/widgets/client"

// The websites filters (same popovers, URL and query) and map; the cards and the area rows are the site's design.
const BuildingCard = ({ card, ctx }: { card: SiteBuildingCard; ctx: DirectoryCardContext }) => {
  const body = (
    <>
      <div className="relative aspect-[4/5] overflow-hidden rounded-card bg-muted">
        {card.image ? <Image src={card.image} alt="" fill sizes={ctx.layout === "row" ? "(min-width: 1024px) 25vw, 75vw" : "(min-width: 1024px) 30vw, 100vw"} className="object-cover" /> : null}
      </div>
      <h3 className="mt-3 font-heading text-xl">{card.name}</h3>
      <p className="text-sm text-muted-foreground">{card.city} · {card.activeListings.forSale} for sale</p>
    </>
  )
  return (
    <article data-hovered={ctx.hovered || undefined} onMouseEnter={() => ctx.onHover(true)} onMouseLeave={() => ctx.onHover(false)} className="group">
      {/* ctx.href: the card's detail on your building route (root detailHref); ctx.open(): the building dialog. */}
      {ctx.href ? <Link href={ctx.href} onClick={(event) => { event.preventDefault(); ctx.open() }}>{body}</Link> : <button type="button" onClick={ctx.open} className="text-left">{body}</button>}
    </article>
  )
}

export const CondosView = ({ data }: { data: PandaDirectoryData }) => (
  <PandaDirectoryRoot data={data} detailHref="/condos/{slug}">
    <DirectoryFilterBar />
    <div className="flex">
      <div className="w-[60%]">
        <DirectoryResultsHeader />
        <DirectoryResults
          renderCard={(card: SiteBuildingCard, ctx) => <BuildingCard card={card} ctx={ctx} />}
          renderAreaRow={(row, ctx) => (
            <section className="px-6">
              <header className="mb-4 flex items-baseline justify-between">
                <h2 className="font-heading text-2xl">{row.area}</h2>
                <button type="button" onClick={ctx.showAll}>Show all {row.totalCount}</button>
              </header>
              <div className="grid grid-cols-2 gap-6 xl:grid-cols-3">
                {row.cards.slice(0, 6).map((card, index) => <div key={card.id}>{ctx.renderCard(card, index)}</div>)}
              </div>
            </section>
          )}
        />
      </div>
      <div className="sticky top-[var(--site-header-height,104px)] h-[calc(100dvh-var(--site-header-height,104px))] w-[40%] pb-4 pr-3">
        <div className="size-full overflow-hidden rounded-card">
          <DirectoryMap />
        </div>
      </div>
    </div>
  </PandaDirectoryRoot>
)

"use client"
import Link from "next/link"
import { DirectoryFilterBar, DirectoryMap, PandaDirectoryRoot, usePandaDirectory, type PandaDirectoryData, type SiteBuildingCard } from "@pandaidx/widgets/client"
import { resolveLibraryHref } from "@pandaidx/widgets/search"

const Results = () => {
  const { cards, areaRows, landing, total, hasMore, loadMore, isLoading, setHoveredId, open } = usePandaDirectory<SiteBuildingCard>()
  const list = landing ? areaRows.flatMap((row) => row.cards) : cards
  return (
    <section aria-busy={isLoading}>
      <p>{total} buildings</p>
      <ul className="grid gap-6 sm:grid-cols-2">
        {list.map((card) => {
          const href = resolveLibraryHref(card, "default", { buildingDetail: "/condos/{slug}" })
          return (
            <li key={card.id} onMouseEnter={() => setHoveredId(card.id)} onMouseLeave={() => setHoveredId(null)}>
              {href ? <Link href={href}>{card.name}</Link> : <button type="button" onClick={() => open(card)}>{card.name}</button>}
            </li>
          )
        })}
      </ul>
      {!landing && hasMore ? <button type="button" onClick={loadMore}>Load more</button> : null}
    </section>
  )
}

export const CondosView = ({ data }: { data: PandaDirectoryData }) => (
  <PandaDirectoryRoot data={data} detailHref="/condos/{slug}">
    <DirectoryFilterBar />
    <div className="grid grid-cols-[3fr_2fr]">
      <Results />
      <div className="sticky top-0 h-dvh"><DirectoryMap /></div>
    </div>
  </PandaDirectoryRoot>
)

"use client"
import { DirectoryFilterAreas, DirectoryFilterBedsBaths, DirectoryFilterPrice, DirectoryFilterStatus, DirectoryMoreFilters, DirectorySearchName, usePandaDirectory } from "@pandaidx/widgets/client"

// Your own bar with the websites filters (their popovers, Apply buttons and query): pick and order them.
export const CondoFilters = () => {
  const { setViewMode, viewMode } = usePandaDirectory()
  return (
    <div className="sticky top-[var(--site-header-height,104px)] z-20 flex h-14 items-center gap-2 bg-background px-6">
      <DirectorySearchName />
      <DirectoryFilterAreas />
      <DirectoryFilterStatus />
      <DirectoryFilterPrice />
      <DirectoryFilterBedsBaths />
      <DirectoryMoreFilters />
      {viewMode === "fullList" ? <button type="button" className="ml-auto" onClick={() => setViewMode("split")}>Show map</button> : null}
    </div>
  )
}

"use client"
import { PandaDirectoryRoot, usePandaDirectory, type PandaDirectoryData } from "@pandaidx/widgets/client"

// Area pills with the total each one lists under the other filters (price, beds, delivery year...).
const AreaPills = ({ areas }: { areas: PandaDirectoryData["allAreas"] }) => {
  const { facets, query, handleSubmit } = usePandaDirectory()
  return (
    <ul className="flex flex-wrap gap-2">
      {areas.map((area) => {
        // facets is null on the landing (no filter) and before the first search: fall back to buildingCount.
        const count = facets ? (facets.areas[area.query] ?? 0) : Number(area.buildingCount ?? 0)
        if (facets && count === 0) return null
        const selected = query.selectedAreas.includes(area.query)
        return (
          <li key={area._id}>
            <button type="button" aria-pressed={selected} onClick={() => handleSubmit({ selectedAreas: selected ? [] : [area.query] })}>
              <span className="capitalize">{area.query.toLowerCase()}</span> <span>{count}</span>
            </button>
          </li>
        )
      })}
    </ul>
  )
}

export const CondosView = ({ data }: { data: PandaDirectoryData }) => (
  <PandaDirectoryRoot data={data} detailHref="/condos/{slug}">
    <AreaPills areas={data.allAreas} />
  </PandaDirectoryRoot>
)

// app/condos/page.tsx
import { fetchCondoDirectory } from "@pandaidx/widgets/server"
import { CondoDirectoryView } from "@/components/condo-directory-view"

export default async function CondosPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const data = await fetchCondoDirectory({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL, searchParams: await searchParams })
  return <CondoDirectoryView data={data} />
}

// components/condo-directory-view.tsx
"use client"
import Image from "next/image"
import Link from "next/link"
import { CondoAreaMap, useCondoDirectory, type SiteCondoDirectoryResponse } from "@pandaidx/widgets/client"
import { resolveLibraryHref } from "@pandaidx/widgets/search"

export const CondoDirectoryView = ({ data }: { data: SiteCondoDirectoryResponse }) => {
  const directory = useCondoDirectory({ data })
  return (
    <section className="mx-auto max-w-7xl px-6 py-16">
      <div className="mb-8 flex flex-wrap gap-4">
        <select value={directory.query.area ?? ""} onChange={(event) => directory.update({ area: event.target.value || null })} aria-label="Area">
          <option value="">All areas</option>
          {directory.areas.map((area) => <option key={area.slug} value={area.slug}>{area.name} ({area.buildingCount})</option>)}
        </select>
        <input value={directory.searchText} onChange={(event) => directory.search(event.target.value)} placeholder="Search by name" aria-label="Search by name" />
        {directory.filtered ? <button type="button" onClick={directory.reset}>Clear</button> : null}
      </div>
      <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3" aria-busy={directory.loading}>
        {directory.buildings.map((building) => {
          // The card is the API record: resolveLibraryHref mounts its detail URL on your building route.
          const href = resolveLibraryHref(building, "default", { buildingDetail: "/condos/{slug}" })
          const card = (
            <>
              <div className="relative aspect-[4/3] overflow-hidden bg-muted">
                {building.image ? <Image src={building.image} alt="" fill sizes="(min-width: 1024px) 33vw, 50vw" className="object-cover" /> : null}
              </div>
              <h3 className="mt-3 text-lg">{building.name}</h3>
              <p className="text-sm opacity-60">{building.city}</p>
            </>
          )
          return <li key={building.id}>{href ? <Link href={href} className="group block">{card}</Link> : card}</li>
        })}
      </ul>
      <CondoAreaMap buildings={directory.buildings} routes={{ buildingDetail: "/condos/{slug}" }} className="mt-10 h-96" />
      {directory.totalPages > 1 ? (
        <nav className="mt-10 flex justify-between">
          <button type="button" disabled={directory.page <= 1} onClick={() => directory.setPage(directory.page - 1)}>Previous</button>
          <button type="button" disabled={directory.page >= directory.totalPages} onClick={() => directory.setPage(directory.page + 1)}>Next</button>
        </nav>
      ) : null}
    </section>
  )
}