Sentence Form: Project Brief

"use client";

import { SentenceForm, SentenceFormField } from "@/components/ui/sentence-form";

// Stands in for a real request.
const send = () => new Promise<void>((resolve) => setTimeout(resolve, 1200));

const firstName = (name: string | string[] | undefined) => String(name ?? "").trim().split(/\s+/)[0];

export function SentenceFormDemo() {
  return (
    <section className="w-full max-w-2xl rounded-3xl bg-[#fbfaf7] px-6 py-8 text-stone-900 ring-1 ring-stone-900/[0.07] sm:px-10 sm:py-10 dark:bg-stone-950 dark:text-stone-100 dark:ring-white/10">
      <div className="flex items-baseline justify-between gap-4 font-mono text-[11px] tracking-[0.16em] text-stone-500 uppercase">
        <span>Start a project</span>
        <span className="max-sm:hidden">Field &amp; Fold Studio</span>
      </div>

      <SentenceForm
        onSubmit={send}
        className="mt-6 min-h-[34rem] font-serif text-[23px] leading-[1.45] sm:min-h-[27rem] sm:text-[31px] sm:leading-[1.4]"
        submitLabel="Send brief"
        success={({ values, edit }) => (
          <p className="max-w-md text-pretty text-stone-600 dark:text-stone-400">
            Thanks, {firstName(values.name)}. We&apos;ll reply to{" "}
            <span className="break-all text-stone-900 dark:text-stone-100">{values.email}</span> within two
            working days.{" "}
            <button
              type="button"
              onClick={edit}
              className="cursor-pointer rounded-sm font-medium text-stone-900 underline decoration-stone-900/30 underline-offset-4 outline-none hover:decoration-stone-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current dark:text-stone-100 dark:decoration-stone-100/30 dark:hover:decoration-stone-100"
            >
              Edit
            </button>
          </p>
        )}
      >
        Hi, I&apos;m{" "}
        <SentenceFormField name="name" label="Your name" placeholder="your name" autoComplete="name" required /> from{" "}
        <SentenceFormField name="company" label="Company" placeholder="your company" autoComplete="organization" />.
        We&apos;d like help with{" "}
        <SentenceFormField
          name="services"
          label="What you need"
          placeholder="a few things"
          options={["a brand identity", "a website", "a product", "motion"]}
          multiple
          required
        />
        , ideally by{" "}
        <SentenceFormField
          name="timeline"
          label="Timeline"
          placeholder="when"
          options={["next month", "this summer", "the end of the year"]}
          custom
        />
        . Our budget is around{" "}
        <SentenceFormField
          name="budget"
          label="Budget"
          placeholder="how much"
          options={["$10k", "$25k", "$50k", "$100k+"]}
          required
        />
        , and you can reach me at{" "}
        <SentenceFormField
          name="email"
          label="Email"
          placeholder="you@company.com"
          type="email"
          autoComplete="email"
          hint="Only used to reply"
          required
        />
        .
      </SentenceForm>
    </section>
  );
}