Question Sequence

import {
  SequenceShell,
  useQuestionSequence,
} from "@/components/socratic-ui/question-sequence";
import { SingleSelect } from "@/components/socratic-ui/single-select";
import { MultiSelect } from "@/components/socratic-ui/multi-select";

function MySequence() {
  const seq = useQuestionSequence({
    ids: ["vibe", "tools"],
    onComplete: (answers) => console.log(answers),
  });

  return (
    <SequenceShell
      controller={seq}
      render={(currentId) => {
        switch (currentId) {
          case "vibe":
            return (
              <SingleSelect
                question="What's your vibe right now?"
                options={[{ title: "Building mode" }, { title: "Planning mode" }]}
                {...seq.bind<string | null>("vibe", null)}
              />
            );
          case "tools":
            return (
              <MultiSelect
                question="Which of these are you actively using?"
                options={[{ title: "Claude Code" }, { title: "Todoist" }]}
                {...seq.bind<string[]>("tools", [])}
              />
            );
        }
      }}
    />
  );
}