`apps/web/src/app/builders/[slug]/page.tsx`

61 lines
import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@homesonspec/database";
import { fmtPrice } from "@homesonspec/shared-ui";

export const dynamic = "force-dynamic";

export default async function BuilderPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const builder = await prisma.builder.findUnique({
    where: { slug },
    include: {
      divisions: true,
      communities: { include: { _count: { select: { homes: { where: { status: "PUBLISHED", isDemo: false } } } } } },
    },
  });
  if (!builder || builder.isDemo) notFound();

  const homeCount = await prisma.inventoryHome.count({ where: { builderId: builder.id, status: "PUBLISHED", isDemo: false } });

  return (
    <div className="mx-auto max-w-5xl px-4 py-8">
      <h1 className="text-3xl font-bold">{builder.name}</h1>
      <p className="mt-1 text-sm text-neutral-500">
        {builder.coverageArea} · {homeCount} available homes · {builder.communities.length} communities
      </p>
      <p className="mt-2 text-xs text-neutral-400">
        Listing on HomesOnSpec does not imply sponsorship or endorsement by the builder.
      </p>

      <section className="mt-8">
        <h2 className="text-xl font-semibold">Communities</h2>
        <div className="mt-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {builder.communities.map((community) => (
            <Link key={community.id} href={`/communities/${community.slug}`}
              className="rounded-xl border border-neutral-200 p-4 shadow-sm hover:border-teal-400">
              <div className="font-semibold">{community.name}</div>
              <div className="text-sm text-neutral-500">{community.city}, {community.state}</div>
              <div className="mt-1 text-sm text-neutral-500">
                {community._count.homes} homes
                {community.priceMin ? ` · from ${fmtPrice(Number(community.priceMin))}` : ""}
              </div>
            </Link>
          ))}
        </div>
      </section>

      {builder.divisions.length > 0 && (
        <section className="mt-8 text-sm text-neutral-600">
          <h2 className="text-xl font-semibold text-neutral-900">Divisions</h2>
          <ul className="mt-2 list-inside list-disc">
            {builder.divisions.map((division) => (
              <li key={division.id}>{division.name} — {division.region} ({division.states.join(", ")})</li>
            ))}
          </ul>
        </section>
      )}
    </div>
  );
}