External Submit

"use client";

import { Button } from "@tilt-legal/cubitt-components/button";
import { z } from "zod";
import { FormBuilder } from "@tilt-legal/cubitt-components/form-builder";

const schema = z.object({
  name: z.string().min(1, "Required"),
});

const formDefs = [
  {
    kind: "field",
    name: "name",
    label: "Name",
    component: "text",
    size: "full",
  },
] as const satisfies FormDefs;

export default function ExternalSubmitForm() {
  const formId = "my-form";

  return (
    <div className="space-y-4">
      <FormBuilder.Single
        id={formId}
        schema={schema}
        formDefs={formDefs}
        defaultValues={{ name: "" }}
        onSubmit={async (values) => console.log(values)}
      />

      <Button type="submit" form={formId}>
        Submit
      </Button>
    </div>
  );
}