Three questions, one at a time

// apps/docs/examples/ui/questionnaire.tsx'use client';
import {useState} from 'react';
import {  Questionnaire,  QuestionnaireActions,  QuestionnaireChoice,  QuestionnaireChoiceDescription,  QuestionnaireChoices,  QuestionnaireDescription,  QuestionnaireError,  QuestionnaireInput,  QuestionnaireItem,  QuestionnaireNext,  QuestionnairePrevious,  QuestionnaireProgress,  QuestionnaireSkip,  QuestionnaireSubmit,  QuestionnaireTitle,} from '@workspace/active-ui/components/primitives/questionnaire';
/** * Three questions, one at a time: a required single choice with number * shortcuts, an optional multiple choice that can be skipped, and a text * answer. Every word is the caller's: the button labels, the progress * sentence and the error. The answers are read from the form on submit; this * example shows them instead of sending them. */export default function QuestionnaireExample() {  const [answers, setAnswers] = useState<string | null>(null);  return (    <div className="w-full max-w-md">      <Questionnaire        shortcuts="numbers"        onSubmit={(event) => {          event.preventDefault();          const data = new FormData(event.currentTarget);          setAnswers(            JSON.stringify(              {                frequency: data.get('frequency'),                channels: data.getAll('channels'),                remarks: data.get('remarks'),              },              null,              1,            ),          );        }}      >        <QuestionnaireProgress          label="Questionnaire progress"          formatProgress={({current, total}) =>            `Question ${current} of ${total}`          }        />        <QuestionnaireItem name="frequency" required>          <QuestionnaireTitle>            How often do you want a statement?          </QuestionnaireTitle>          <QuestionnaireChoices>            <QuestionnaireChoice value="monthly">              Every month            </QuestionnaireChoice>            <QuestionnaireChoice value="quarterly">              Every quarter            </QuestionnaireChoice>            <QuestionnaireChoice value="yearly">              Once a year              <QuestionnaireChoiceDescription>                The minimum the law requires.              </QuestionnaireChoiceDescription>            </QuestionnaireChoice>          </QuestionnaireChoices>          <QuestionnaireError>Choose how often to continue.</QuestionnaireError>        </QuestionnaireItem>        <QuestionnaireItem name="channels" multiple>          <QuestionnaireTitle>Where should we send it?</QuestionnaireTitle>          <QuestionnaireDescription>            Choose any number, or skip the question.          </QuestionnaireDescription>          <QuestionnaireChoices>            <QuestionnaireChoice value="email">Email</QuestionnaireChoice>            <QuestionnaireChoice value="portal">Portal</QuestionnaireChoice>            <QuestionnaireChoice value="letter">Letter</QuestionnaireChoice>          </QuestionnaireChoices>          <QuestionnaireError>            Choose a channel or skip this question.          </QuestionnaireError>        </QuestionnaireItem>        <QuestionnaireItem name="remarks">          <QuestionnaireTitle>Anything else we should know?</QuestionnaireTitle>          <QuestionnaireInput placeholder="Optional" />        </QuestionnaireItem>        <QuestionnaireActions>          <QuestionnairePrevious>Previous</QuestionnairePrevious>          <QuestionnaireSkip>Skip</QuestionnaireSkip>          <QuestionnaireNext>Next</QuestionnaireNext>          <QuestionnaireSubmit>Submit</QuestionnaireSubmit>        </QuestionnaireActions>      </Questionnaire>      {answers ? (        <pre          className="bg-muted mt-4 rounded-md p-3 text-xs"          aria-live="polite"        >          {answers}        </pre>      ) : null}    </div>  );}