Building Detail

"use client"
import Image from "next/image"
import { useBuildingDetail } from "@pandaidx/widgets/client"

export const BuildingMosaic = () => {
  const { photos, displayName } = useBuildingDetail()
  return (
    <div className="mx-auto grid h-96 max-w-7xl grid-cols-4 grid-rows-2 gap-2 px-4 lg:px-6">
      {photos.slice(0, 5).map((src, i) => (
        <div key={src} className={i === 0 ? "relative col-span-2 row-span-2" : "relative"}>
          <Image src={src} alt={`${displayName} photo ${i + 1}`} fill sizes={i === 0 ? "50vw" : "25vw"} className="object-cover" />
        </div>
      ))}
    </div>
  )
}
// <BuildingDetail {...data} variant="panda" parts={{ gallery: <BuildingMosaic /> }} />

"use client"
import { BuildingAmenityList, BuildingListingCard, BuildingListingsStatusTabs, useBuildingDetail, useBuildingListings } from "@pandaidx/widgets/client"

export const BuildingUnits = () => {
  const { filtered, bedsTab, setBedsTab, bedOptions, hasMore, loadMore } = useBuildingListings()
  return (
    <section>
      <BuildingListingsStatusTabs />
      <div className="flex gap-2">{bedOptions.map((o) => <button key={o.key} aria-pressed={bedsTab === o.key} onClick={() => setBedsTab(o.key)}>{o.label}</button>)}</div>
      <div className="grid gap-3 lg:grid-cols-2">{filtered.map((l) => <BuildingListingCard key={l.ListingId} listing={l} />)}</div>
      {hasMore ? <button onClick={() => void loadMore()}>Load more</button> : null}
    </section>
  )
}

export const BuildingAmenities = () => {
  const { amenityRows } = useBuildingDetail()
  return <div className="grid gap-12 lg:grid-cols-2"><BuildingAmenityList title="Building amenities" items={amenityRows.building} /><BuildingAmenityList title="Additional details" items={amenityRows.additional} /></div>
}
// <BuildingDetailRoot {...data}><BuildingDetailBlock id="header" /><BuildingUnits /><BuildingAmenities /></BuildingDetailRoot>

<BuildingDetailRoot {...data}>
  <BuildingDetailBlock id="header" />
  <BuildingDetailBlock id="gallery" />
  <BuildingDetailBlock id="listings" />
  <BuildingDetailBlock id="about" />
  <BuildingDetailBlock id="neighborhood" />
</BuildingDetailRoot>

<BuildingDetailRoot {...data}>
  {/* The websites page, block by block in its order: wrap or interleave your own sections anywhere. */}
  <BuildingDetailBlock id="header" />
  <BuildingDetailBlock id="nav" />
  <BuildingDetailBlock id="gallery" />
  <BuildingDetailBlock id="stats" />
  <BuildingDetailBlock id="about" />
  <BuildingDetailBlock id="sales" />
  <BuildingDetailBlock id="listings" />
  <BuildingDetailBlock id="amenities" />
  <BuildingDetailBlock id="mortgage" />
  <BuildingDetailBlock id="neighborhood" />
  <BuildingDetailBlock id="schools" />
</BuildingDetailRoot>