Form Dialog

type FormResult = {
  name: string;
  email: string;
};

function UserForm({ pop }: SurfaceContext<FormResult>) {
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const form = new FormData(event.currentTarget);

    pop({
      name: String(form.get('name') ?? ''),
      email: String(form.get('email') ?? ''),
    });
  }

  return (
    <Surface.Body onSubmit={handleSubmit}>
      <Surface.Header
        title="Create user"
        onPop={() => pop()}
      />

      <Surface.Content>
        <label>
          Name
          <input name="name" required />
        </label>

        <label>
          Email
          <input name="email" type="email" required />
        </label>
      </Surface.Content>

      <Surface.Footer>
        <button type="submit">
          Create
        </button>
      </Surface.Footer>
    </Surface.Body>
  );
}

const result = await Surface.Dialog.present<FormResult>({
  body: UserForm,
});