Off-Market Listings

// app/listings/page.tsx
import { fetchOffMarketListings } from "@pandaidx/widgets/server"
import { ExclusivesView } from "@/components/exclusives-view"

export default async function ListingsPage() {
  const data = await fetchOffMarketListings({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL })
  return data ? <ExclusivesView data={data} /> : null
}

// components/exclusives-view.tsx
"use client"
import Image from "next/image"
import Link from "next/link"
import { useOffMarketListings, type OffMarketListingsData } from "@pandaidx/widgets/client"

export const ExclusivesView = ({ data }: { data: OffMarketListingsData }) => {
  const { listings } = useOffMarketListings({ data })
  return (
    <section className="mx-auto max-w-6xl px-4 py-16">
      <div className="grid gap-8 md:grid-cols-3">
        {listings.map((card) => (
          <Link key={card.id} href={card.href}>
            {card.image ? <Image src={card.image} alt="" width={640} height={480} sizes="(min-width: 768px) 33vw, 100vw" className="aspect-[4/3] w-full object-cover" /> : null}
            <p className="mt-3 text-xl">{card.priceLabel}</p>
            <p>{card.address}</p>
          </Link>
        ))}
      </div>
    </section>
  )
}