New Developments

// app/new-developments/page.tsx (server): const data = await fetchPandaNewDevelopments({ 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 NewDevelopmentsView = ({ 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>
)

"use client"
import Image from "next/image"
import Link from "next/link"
import { DirectoryFilterBar, DirectoryMap, DirectoryResults, PandaDirectoryRoot, type PandaDirectoryData, type SiteNewDevelopment } from "@pandaidx/widgets/client"

export const NewDevelopmentsView = ({ data }: { data: PandaDirectoryData }) => (
  <PandaDirectoryRoot data={data} detailHref="/new-development/{slug}">
    <DirectoryFilterBar />
    <div className="flex">
      <div className="w-[60%]">
        <DirectoryResults
          renderCard={(card: SiteNewDevelopment, ctx) => {
            const body = (
              <>
                <div className="relative aspect-video overflow-hidden rounded-card bg-muted">
                  {card.images.cover ? <Image src={card.images.cover} alt="" fill sizes="(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.developer].filter(Boolean).join(" · ")}</p>
              </>
            )
            return (
              <article onMouseEnter={() => ctx.onHover(true)} onMouseLeave={() => ctx.onHover(false)}>
                {ctx.href ? <Link href={ctx.href}>{body}</Link> : <button type="button" onClick={ctx.open}>{body}</button>}
              </article>
            )
          }}
        />
      </div>
      <div className="sticky top-[var(--site-header-height,104px)] h-[calc(100dvh-var(--site-header-height,104px))] w-[40%]">
        <DirectoryMap />
      </div>
    </div>
  </PandaDirectoryRoot>
)

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

// Developer list with the projects each one has under the other filters (price, beds, delivery year...).
const DeveloperList = () => {
  const { developers, facets, handleSubmit } = usePandaDirectory()
  // facets is null on the landing and before the first search: `developers` (every developer, A to Z) fills in.
  const list = facets ? facets.developers : developers
  return (
    <ul>
      {list.map((developer) => (
        <li key={developer.name}>
          <button type="button" onClick={() => handleSubmit({ developer: developer.name })}>
            {developer.name} <span>{developer.count}</span>
          </button>
        </li>
      ))}
    </ul>
  )
}

export const NewDevelopmentsView = ({ data }: { data: PandaDirectoryData }) => (
  <PandaDirectoryRoot data={data} detailHref="/new-development/{slug}">
    <DeveloperList />
  </PandaDirectoryRoot>
)

// app/new-developments/page.tsx
import { fetchNewDevelopments } from "@pandaidx/widgets/server"
import { NewDevelopmentsView } from "@/components/new-developments-view"

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

// components/new-developments-view.tsx
"use client"
import Image from "next/image"
import Link from "next/link"
import { NewDevelopmentsMap, useNewDevelopmentsDirectory, type SiteNewDevelopmentsDirectoryResponse } from "@pandaidx/widgets/client"
import { resolveLibraryHref } from "@pandaidx/widgets/search"

export const NewDevelopmentsView = ({ data }: { data: SiteNewDevelopmentsDirectoryResponse }) => {
  const directory = useNewDevelopmentsDirectory({ data })
  return (
    <section className="mx-auto max-w-7xl px-6 py-16">
      <input value={directory.searchText} onChange={(event) => directory.search(event.target.value)} placeholder="Search projects" aria-label="Search projects" className="mb-8" />
      <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3" aria-busy={directory.loading}>
        {directory.newDevelopments.map((development) => {
          const href = resolveLibraryHref(development, "default", { newDevelopmentDetail: "/new-development/{slug}" })
          const card = (
            <>
              <div className="relative aspect-[4/3] overflow-hidden bg-muted">
                {development.images.cover ? <Image src={development.images.cover} alt="" fill sizes="(min-width: 1024px) 33vw, 50vw" className="object-cover" /> : null}
              </div>
              <h3 className="mt-3 text-lg">{development.name}</h3>
              <p className="text-sm opacity-60">{development.city}</p>
            </>
          )
          return <li key={development.id}>{href ? <Link href={href}>{card}</Link> : card}</li>
        })}
      </ul>
      <NewDevelopmentsMap developments={directory.newDevelopments} routes={{ newDevelopmentDetail: "/new-development/{slug}" }} className="mt-10 h-96" />
    </section>
  )
}

"use client"
import Image from "next/image"
import Link from "next/link"
import {
  DirectoryCount, DirectoryDisplayToggle, DirectoryFilterAreas, DirectoryFilterCountry, DirectoryFilterDeveloper, DirectoryFilterPrice, DirectoryFilterUnits, DirectoryFilterYear, DirectoryLoadMore, DirectoryMap,
  DirectoryResults, DirectorySearchName, DirectorySort, PandaDirectoryRoot, type PandaDirectoryData, type SiteNewDevelopment,
} from "@pandaidx/widgets/client"

// Every piece is yours to place: your filter row from the websites popovers, your header (count, sort, grid / list), your grid
// (columns per breakpoint, gap, empty state, where "Load more" goes) and your cards. The map is a part too: put it above,
// beside, inside a dialog, or leave it out. The root keeps the filters, URL, infinite loading and the hover sync.
export const NewDevelopmentsView = ({ data }: { data: PandaDirectoryData }) => (
  <PandaDirectoryRoot data={data} detailHref="/new-development/{slug}">
    <div className="flex flex-wrap items-center gap-3">
      <DirectorySearchName className="w-72" />
      <DirectoryFilterCountry />
      <DirectoryFilterAreas />
      <DirectoryFilterPrice />
      <DirectoryFilterYear />
      <DirectoryFilterUnits />
      <DirectoryFilterDeveloper />
      <div className="ml-auto flex items-center gap-4">
        <DirectoryCount />
        <DirectorySort />
        <DirectoryDisplayToggle />
      </div>
    </div>
    <DirectoryResults
      layout={{ columns: { base: 1, md: 2, xl: 3 }, gap: "3rem 2rem", loadMore: false, empty: <p>No projects match these filters.</p> }}
      renderCard={(card: SiteNewDevelopment, ctx) => {
        const body = (
          <>
            <div className="relative aspect-[4/5] overflow-hidden">{card.images.cover ? <Image src={card.images.cover} alt="" fill sizes="(min-width: 1280px) 30vw, 100vw" className="object-cover" /> : null}</div>
            <h3 className="mt-3 text-xl">{card.name}</h3>
            <p className="text-sm opacity-70">{[card.city, card.developer].filter(Boolean).join(" · ")}</p>
            {card.headline ? <p className="mt-1 text-sm">{card.headline}</p> : null}
          </>
        )
        return (
          <article onMouseEnter={() => ctx.onHover(true)} onMouseLeave={() => ctx.onHover(false)}>
            {ctx.href ? <Link href={ctx.href}>{body}</Link> : <button type="button" onClick={ctx.open}>{body}</button>}
          </article>
        )
      }}
    />
    <DirectoryLoadMore />
    <div className="mt-10 h-[480px] overflow-hidden rounded-card">
      <DirectoryMap />
    </div>
  </PandaDirectoryRoot>
)