Live Preview Wizard

import {
  LivePreviewWizard,
  LivePreviewWizardStep,
  useLivePreviewWizard,
} from "@/components/ui/live-preview-wizard";

type Form = {
  name: string;
};

function NameField() {
  const { values, setValue } = useLivePreviewWizard<Form>();
  return (
    <input
      value={values.name}
      onChange={(e) => setValue("name", e.target.value)}
    />
  );
}

function Preview() {
  const { values } = useLivePreviewWizard<Form>();
  return <h1>{values.name || "你的產品"}</h1>;
}

export function Example() {
  return (
    <LivePreviewWizard<Form>
      defaultValues={{ name: "" }}
      preview={<Preview />}
      onComplete={(values) => console.log(values)}
    >
      <LivePreviewWizardStep label="品牌">
        <NameField />
      </LivePreviewWizardStep>
    </LivePreviewWizard>
  );
}