Listing Grid

// app/profile/page.tsx: Panda loads the listings, the site draws them
import { ListingGridRoot } from "@pandaidx/widgets/client"
import { fetchListingGrid } from "@pandaidx/widgets/server"
import { ListingsSection } from "@/components/listings-section"

export default async function ProfilePage({ searchParams }: { searchParams: Promise<{ listings?: string; page?: string }> }) {
  const { listings, page } = await searchParams
  const data = await fetchListingGrid({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL, source: "agent", status: listings === "sold" ? "sold" : "active", page: Number(page) || 1 })
  if (!data) return null
  return (
    <ListingGridRoot data={data}>
      <ListingsSection />
    </ListingGridRoot>
  )
}

// components/listings-section.tsx
"use client"
import Image from "next/image"
import { ListingActionsMenu, MlsDisclaimers, useListingActions, useListingGrid, type SiteListingCard } from "@pandaidx/widgets/client"

const Card = ({ listing }: { listing: SiteListingCard }) => {
  const actions = useListingActions(listing)
  return (
    <article className="group">
      <button type="button" onClick={actions.openDetail} className="relative block aspect-[4/3] w-full overflow-hidden bg-muted">
        {listing.image ? <Image src={listing.image} alt="" fill sizes="(min-width: 1024px) 33vw, 50vw" className="object-cover" /> : null}
      </button>
      <div className="mt-3 flex items-start justify-between">
        <p className="text-lg">{listing.ListPrice ? `$${listing.ListPrice.toLocaleString()}` : null}</p>
        <ListingActionsMenu listing={listing} />
      </div>
      {listing.ListOfficeName ? <p className="mt-1 text-xs text-muted-foreground">Listing by {listing.ListOfficeName}</p> : null}
    </article>
  )
}

export const ListingsSection = () => {
  const { listings, status, hasMore, page } = useListingGrid()
  return (
    <section className="mx-auto max-w-7xl px-6 py-16">
      <nav className="mb-8 flex gap-6">
        <a href="?listings=active#listings" aria-current={status === "active"}>Active</a>
        <a href="?listings=sold#listings" aria-current={status === "sold"}>Sold</a>
      </nav>
      <div id="listings" className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {listings.map((listing) => <Card key={listing._id} listing={listing} />)}
      </div>
      {hasMore ? <a href={`?listings=${status}&page=${page + 1}#listings`}>Next</a> : null}
      <MlsDisclaimers className="mt-12" />
    </section>
  )
}

// Inside <ListingGridRoot data={data}> (a client component)
import { ListingGridCard, ListingGridMap, MlsDisclaimers, useListingGrid } from "@pandaidx/widgets/client"

export const CollectionBody = () => {
  const { listings, collection } = useListingGrid()
  return (
    <div className="grid gap-8 lg:grid-cols-[1fr_28rem]">
      <div>
        <h1 className="text-3xl">{collection?.name}</h1>
        <div className="mt-6 grid gap-6 sm:grid-cols-2">{listings.map((listing) => <ListingGridCard key={listing._id} listing={listing} />)}</div>
        <MlsDisclaimers className="mt-10" />
      </div>
      <ListingGridMap className="sticky top-24 h-[32rem] rounded-2xl" />
    </div>
  )
}