community-rule/app/(marketing)/workshops/page.tsx

import type { Metadata } from "next";
import { connection } from "next/server";
import { cookies, headers } from "next/headers";
import messages from "../../../messages/en/index";
import { routeMetadata } from "../../../lib/siteMetadata";
import { EMPTY_WORKSHOP_FORM_VALUES } from "../../../lib/workshopSignup";
import {
  WORKSHOP_SIGNUP_DRAFT_COOKIE,
  decodeWorkshopSignupDraft,
} from "../../../lib/server/workshopSignupDraft";
import WorkshopHero from "../../components/sections/WorkshopHero";
import WorkshopOverview from "../../components/sections/WorkshopOverview";
import WorkshopCircle from "../../components/sections/WorkshopCircle";
import WhoRunsIt from "../../components/sections/WhoRunsIt";
import QuoteBlock from "../../components/sections/QuoteBlock";
import WorkshopSignup from "../../components/sections/WorkshopSignup";
import AskOrganizer from "../../components/sections/AskOrganizer";

export const metadata: Metadata = routeMetadata("/workshops", {
  title: messages.metadata.workshops.title,
  description: messages.metadata.workshops.description,
});

interface PageProps {
  searchParams: Promise<{ signup?: string; band?: string }>;
}

export default async function WorkshopsPage({ searchParams }: PageProps) {
  await connection();
  const params = await searchParams;
  const headerStore = await headers();
  const host = headerStore.get("x-forwarded-host") ?? headerStore.get("host");
  const proto = headerStore.get("x-forwarded-proto") ?? "https";
  const sourceUrl = host ? `${proto}://${host}/workshops` : "";

  const signup = params.signup;
  const draft =
    signup === "invalid" || signup === "failed"
      ? decodeWorkshopSignupDraft((await cookies()).get(WORKSHOP_SIGNUP_DRAFT_COOKIE)?.value)
      : null;

  const initialStatus =
    signup === "sent"
      ? "sent"
      : signup === "invalid"
        ? "invalid"
        : signup === "failed"
          ? "failed"
          : "idle";

  const page = messages.pages.workshops;
  const ask = messages.pages.home.askOrganizer;

  return (
    <div className="min-h-screen bg-black">
      <WorkshopHero />
      <WorkshopOverview />
      <WorkshopCircle />
      <WhoRunsIt />
      <QuoteBlock
        variant="citation"
        id="workshops-quote"
        quote={page.quote.text}
        author={page.quote.author}
        source={page.quote.source}
      />
      <WorkshopSignup
        issuedAt={Date.now()}
        schedulingUrl={process.env.NEXT_PUBLIC_WORKSHOP_SCHEDULING_URL ?? ""}
        sourceUrl={sourceUrl}
        initialStatus={initialStatus}
        initialLarge={params.band === "large"}
        initialValues={draft?.values ?? EMPTY_WORKSHOP_FORM_VALUES}
        initialFieldErrors={draft?.fieldErrors}
      />
      <section className="bg-black">
        <AskOrganizer
          title={ask.title}
          subtitle={ask.subtitle}
          buttonText={ask.buttonText}
        />
      </section>
    </div>
  );
}