Files
WebForm-mw/app/page.tsx
2026-05-09 20:08:15 -07:00

61 lines
1.9 KiB
TypeScript

import { Suspense } from "react";
import { EngagementForm } from "@/components/EngagementForm";
import { SiteHeader, SiteFooter } from "@/components/SiteChrome";
import { formConfig } from "@/config/form";
interface PageProps {
searchParams: Promise<{ cid?: string; cs?: string }>;
}
export default async function Page({ searchParams }: PageProps) {
const { cid, cs } = await searchParams;
return (
<>
<SiteHeader />
<main id="main" className="flex-1 bg-stone-50">
<a
href="#main"
className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:rounded focus:bg-white focus:px-3 focus:py-2 focus:shadow"
>
Skip to content
</a>
<div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12">
<header className="mb-8">
<h1 className="text-2xl font-semibold text-stone-900 sm:text-3xl">
{formConfig.title}
</h1>
{formConfig.subtitle && (
<p className="mt-2 text-stone-700 leading-relaxed">{formConfig.subtitle}</p>
)}
</header>
{!cid || !cs ? (
<MissingLinkParams />
) : (
<Suspense fallback={null}>
<EngagementForm config={formConfig} cid={cid} cs={cs} />
</Suspense>
)}
</div>
</main>
<SiteFooter />
</>
);
}
function MissingLinkParams() {
return (
<div
role="alert"
className="rounded-xl border border-amber-200 bg-amber-50 px-6 py-6 text-amber-900"
>
<h2 className="text-lg font-semibold">This link is missing required information.</h2>
<p className="mt-2 leading-relaxed">
Open the form using the personalized link from your email. If you no longer have it,
please contact your engagement coordinator and ask for a fresh link.
</p>
</div>
);
}