69 lines
2.1 KiB
TypeScript
69 lines
2.1 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 (
|
|
<>
|
|
<a
|
|
href="#main"
|
|
className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-paper focus:px-3 focus:py-2 focus:text-ink focus:shadow"
|
|
>
|
|
Skip to content
|
|
</a>
|
|
<SiteHeader />
|
|
<main id="main" className="flex-1">
|
|
<div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 sm:py-14">
|
|
<PageIntro />
|
|
{!cid || !cs ? (
|
|
<MissingLinkParams />
|
|
) : (
|
|
<Suspense fallback={null}>
|
|
<EngagementForm config={formConfig} cid={cid} cs={cs} />
|
|
</Suspense>
|
|
)}
|
|
</div>
|
|
</main>
|
|
<SiteFooter />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function PageIntro() {
|
|
return (
|
|
<header className="mb-10 max-w-2xl">
|
|
<p className="text-[11px] uppercase tracking-[0.18em] text-leaf-700">
|
|
Monthly check-in · Co-op organizing
|
|
</p>
|
|
<h1 className="mt-2 font-display text-[40px] font-normal leading-[1.05] tracking-tight text-ink sm:text-[52px]">
|
|
{formConfig.title}
|
|
</h1>
|
|
<p className="mt-4 max-w-prose text-[17px] leading-relaxed text-ink-soft">
|
|
{formConfig.subtitle}
|
|
</p>
|
|
<div className="mt-6 h-px bg-rule" />
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function MissingLinkParams() {
|
|
return (
|
|
<div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
|
|
<h2 className="font-display text-xl font-medium text-clay-700">
|
|
This link is missing required information.
|
|
</h2>
|
|
<p className="mt-3 leading-relaxed text-ink-soft">
|
|
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>
|
|
);
|
|
}
|