Questionnaire

1
import { For, Show } from "solid-js";
2
import { toast } from "solid-sonner";
3
import { Questionnaire } from "@/registry/kobalte/blocks/questionnaire";
4
import { Toaster } from "~/components/ui/toast";
5

6
const questionnaireItems = [
7
  {
8
    choices: [
9
      {
10
        description: "Show what the agent ran and what came back.",
11
        label: "Tool call timeline",
12
        value: "tool-calls",
13
      },
14
      {
15
        description: "Ask before sensitive or destructive actions.",
16
        label: "Approval checkpoints",
17
        value: "approvals",
18
      },
19
      {
20
        description: "Make delegated work and results easier to follow.",
21
        label: "Sub-agent handoffs",
22
        value: "handoffs",
23
      },
24
    ],
25
    description: "Choose a direction or describe another task.",
26
    input: {
27
      label: "Another agent feature",
28
      placeholder: "Describe another feature…",
29
    },
30
    name: "direction",
31
    required: true,
32
    title: "What should the agent build next?",
33
  },
34
  {
35
    choices: [
36
      { label: "Progress", value: "progress" },
37
      { label: "Decisions", value: "decisions" },
38
      { label: "Risks", value: "risks" },
39
      { label: "Next step", value: "next-step" },
40
    ],
41
    description: "Select all that apply, or skip this question.",
42
    multiple: true,
43
    name: "signals",
44
    required: false,
45
    title: "What should every progress update include?",
46
  },
47
  {
48
    choices: [
49
      { label: "Start now", value: "now" },
50
      { label: "Next development cycle", value: "next-cycle" },
51
      { label: "Add it to the backlog", value: "backlog" },
52
    ],
53
    description: "Choose when the agent should begin the work.",
54
    name: "timing",
55
    required: true,
56
    title: "When should work begin?",
57
  },
58
] as const;
59

60
export default function QuestionnaireDemo() {
61
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
62
    event.preventDefault();
63

64
    const formData = new FormData(event.currentTarget);
65
    const answers = {
66
      direction: formData.get("direction"),
67
      signals: formData.getAll("signals"),
68
      timing: formData.get("timing"),
69
    };
70

71
    toast("Agent plan saved", {
72
      description: `Direction: ${answers.direction ?? "None"} · Progress signals: ${answers.signals.join(", ") || "None"} · Timing: ${answers.timing ?? "None"}`,
73
    });
74
  }
75

76
  return (
77
    <>
78
      <Toaster />
79
      <Questionnaire.Root
80
        class="mx-auto max-w-md"
81
        defaultItem="direction"
82
        items={questionnaireItems}
83
        shortcuts="letters"
84
        onSubmit={handleSubmit}
85
      >
86
        <Questionnaire.Progress />
87
        <For each={questionnaireItems}>
88
          {(question) => (
89
            <Questionnaire.Item
90
              multiple={"multiple" in question && question.multiple}
91
              name={question.name}
92
              required={question.required}
93
            >
94
              <Questionnaire.Title>{question.title}</Questionnaire.Title>
95
              <Questionnaire.Description>{question.description}</Questionnaire.Description>
96
              <Questionnaire.Choices>
97
                <For each={question.choices}>
98
                  {(choice) => (
99
                    <Questionnaire.Choice value={choice.value}>
100
                      <span class="font-medium">{choice.label}</span>
101
                      <Show when={"description" in choice ? choice.description : undefined}>
102
                        {(description) => (
103
                          <span class="text-muted-foreground">{description()}</span>
104
                        )}
105
                      </Show>
106
                    </Questionnaire.Choice>
107
                  )}
108
                </For>
109
                <Show when={"input" in question ? question.input : undefined}>
110
                  {(input) => (
111
                    <Questionnaire.Input
112
                      aria-label={input().label}
113
                      placeholder={input().placeholder}
114
                    />
115
                  )}
116
                </Show>
117
              </Questionnaire.Choices>
118
              <Questionnaire.Error />
119
            </Questionnaire.Item>
120
          )}
121
        </For>
122
        <Questionnaire.Actions>
123
          <Questionnaire.Previous />
124
          <Questionnaire.Skip />
125
          <Questionnaire.Next>Next</Questionnaire.Next>
126
          <Questionnaire.Submit>Save plan</Questionnaire.Submit>
127
        </Questionnaire.Actions>
128
      </Questionnaire.Root>
129
    </>
130
  );
131
}

1
import { toast } from "solid-sonner";
2
import { Questionnaire } from "@/registry/kobalte/blocks/questionnaire";
3
import { Toaster } from "~/components/ui/toast";
4

5
const items = [
6
  {
7
    choices: [{ value: "source" }, { value: "tests" }, { value: "docs" }, { value: "history" }],
8
    name: "context",
9
    required: true,
10
  },
11
] as const;
12

13
export default function QuestionnaireMultiple() {
14
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
15
    event.preventDefault();
16

17
    const context = new FormData(event.currentTarget).getAll("context");
18

19
    toast("Context selected", {
20
      description: `Context: ${context.join(", ") || "None"}`,
21
    });
22
  }
23

24
  return (
25
    <>
26
      <Toaster />
27
      <Questionnaire.Root
28
        class="mx-auto max-w-md"
29
        items={items}
30
        shortcuts="letters"
31
        onSubmit={handleSubmit}
32
      >
33
        <Questionnaire.Item name="context" multiple required>
34
          <Questionnaire.Title>What context should the agent inspect?</Questionnaire.Title>
35
          <Questionnaire.Description>
36
            Select every source that may affect the implementation.
37
          </Questionnaire.Description>
38
          <Questionnaire.Choices>
39
            <Questionnaire.Choice value="source">Relevant source files</Questionnaire.Choice>
40
            <Questionnaire.Choice value="tests">Existing tests</Questionnaire.Choice>
41
            <Questionnaire.Choice value="docs">Architecture documentation</Questionnaire.Choice>
42
            <Questionnaire.Choice value="history">Recent commit history</Questionnaire.Choice>
43
          </Questionnaire.Choices>
44
          <Questionnaire.Error />
45
        </Questionnaire.Item>
46

47
        <Questionnaire.Actions>
48
          <Questionnaire.Submit>Share context</Questionnaire.Submit>
49
        </Questionnaire.Actions>
50
      </Questionnaire.Root>
51
    </>
52
  );
53
}

1
import { toast } from "solid-sonner";
2
import { Questionnaire } from "@/registry/kobalte/blocks/questionnaire";
3
import { Toaster } from "~/components/ui/toast";
4

5
const items = [
6
  {
7
    choices: [{ value: "incremental" }, { value: "module" }, { value: "rewrite" }],
8
    name: "approach",
9
    required: true,
10
  },
11
] as const;
12

13
export default function QuestionnaireFreeform() {
14
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
15
    event.preventDefault();
16

17
    const approach = new FormData(event.currentTarget).get("approach");
18

19
    toast("Approach selected", {
20
      description: `Approach: ${approach ?? "None"}`,
21
    });
22
  }
23

24
  return (
25
    <>
26
      <Toaster />
27
      <Questionnaire.Root
28
        class="mx-auto max-w-md"
29
        items={items}
30
        shortcuts="letters"
31
        onSubmit={handleSubmit}
32
      >
33
        <Questionnaire.Item name="approach" required>
34
          <Questionnaire.Title>How should the agent approach this refactor?</Questionnaire.Title>
35
          <Questionnaire.Description>
36
            Choose a strategy or write a more specific instruction.
37
          </Questionnaire.Description>
38
          <Questionnaire.Choices>
39
            <Questionnaire.Choice value="incremental">
40
              Make the smallest safe change
41
            </Questionnaire.Choice>
42
            <Questionnaire.Choice value="module">
43
              Refactor one module at a time
44
            </Questionnaire.Choice>
45
            <Questionnaire.Choice value="rewrite">
46
              Replace the implementation completely
47
            </Questionnaire.Choice>
48
            <Questionnaire.Input
49
              aria-label="Another refactoring approach"
50
              placeholder="Describe another approach…"
51
            />
52
          </Questionnaire.Choices>
53
          <Questionnaire.Error />
54
        </Questionnaire.Item>
55

56
        <Questionnaire.Actions>
57
          <Questionnaire.Submit>Use this approach</Questionnaire.Submit>
58
        </Questionnaire.Actions>
59
      </Questionnaire.Root>
60
    </>
61
  );
62
}

1
import { createSignal } from "solid-js";
2
import { toast } from "solid-sonner";
3
import {
4
  Questionnaire,
5
  type QuestionnaireItemStatus,
6
} from "@/registry/kobalte/blocks/questionnaire";
7
import { Toaster } from "~/components/ui/toast";
8

9
const items = [
10
  { name: "task", required: true },
11
  { name: "constraints" },
12
  { name: "review", required: true },
13
] as const;
14

15
export default function QuestionnaireSkipDemo() {
16
  const [constraintStatus, setConstraintStatus] =
17
    createSignal<QuestionnaireItemStatus>("unanswered");
18

19
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
20
    event.preventDefault();
21

22
    const formData = new FormData(event.currentTarget);
23
    const answers = {
24
      task: formData.get("task"),
25
      constraints: formData.get("constraints"),
26
      constraintStatus: constraintStatus(),
27
      review: formData.get("review"),
28
    };
29

30
    toast("Agent brief submitted", {
31
      description: `Task: ${answers.task ?? "None"} · Constraints: ${
32
        answers.constraintStatus === "skipped" ? "Skipped" : (answers.constraints ?? "None")
33
      } · Review: ${answers.review ?? "None"}`,
34
    });
35
  }
36

37
  return (
38
    <>
39
      <Toaster />
40
      <Questionnaire.Root
41
        class="mx-auto max-w-md"
42
        defaultItem="task"
43
        items={items}
44
        onSubmit={handleSubmit}
45
      >
46
        <Questionnaire.Progress />
47

48
        <Questionnaire.Item name="task" required>
49
          <Questionnaire.Title>What kind of change is this?</Questionnaire.Title>
50
          <Questionnaire.Description>
51
            Choose the category that best describes the work.
52
          </Questionnaire.Description>
53
          <Questionnaire.Choices>
54
            <Questionnaire.Choice value="feature">New feature</Questionnaire.Choice>
55
            <Questionnaire.Choice value="fix">Bug fix</Questionnaire.Choice>
56
            <Questionnaire.Choice value="refactor">Refactor</Questionnaire.Choice>
57
          </Questionnaire.Choices>
58
          <Questionnaire.Error />
59
        </Questionnaire.Item>
60

61
        <Questionnaire.Item name="constraints" onStatusChange={setConstraintStatus}>
62
          <Questionnaire.Title>Are there any implementation constraints?</Questionnaire.Title>
63
          <Questionnaire.Description>
64
            Answer if needed, or intentionally skip this question.
65
          </Questionnaire.Description>
66
          <Questionnaire.Choices>
67
            <Questionnaire.Choice value="no-dependencies">
68
              Do not add dependencies
69
            </Questionnaire.Choice>
70
            <Questionnaire.Choice value="no-migrations">
71
              Do not change the database
72
            </Questionnaire.Choice>
73
            <Questionnaire.Choice value="preserve-api">
74
              Preserve the public API
75
            </Questionnaire.Choice>
76
            <Questionnaire.Input
77
              aria-label="Another implementation constraint"
78
              placeholder="Describe another constraint…"
79
            />
80
          </Questionnaire.Choices>
81
        </Questionnaire.Item>
82

83
        <Questionnaire.Item name="review" required>
84
          <Questionnaire.Title>How should the work be reviewed?</Questionnaire.Title>
85
          <Questionnaire.Description>
86
            Choose the checks the agent should complete before handoff.
87
          </Questionnaire.Description>
88
          <Questionnaire.Choices>
89
            <Questionnaire.Choice value="tests">Run the test suite</Questionnaire.Choice>
90
            <Questionnaire.Choice value="diff">Review the final diff</Questionnaire.Choice>
91
            <Questionnaire.Choice value="both">Tests and diff review</Questionnaire.Choice>
92
          </Questionnaire.Choices>
93
          <Questionnaire.Error />
94
        </Questionnaire.Item>
95

96
        <Questionnaire.Actions>
97
          <Questionnaire.Previous />
98
          <Questionnaire.Skip />
99
          <Questionnaire.Next>Next</Questionnaire.Next>
100
          <Questionnaire.Submit>Submit brief</Questionnaire.Submit>
101
        </Questionnaire.Actions>
102
      </Questionnaire.Root>
103
    </>
104
  );
105
}

1
import { createSignal } from "solid-js";
2
import { toast } from "solid-sonner";
3
import {
4
  Questionnaire,
5
  type QuestionnaireShortcutMode,
6
} from "@/registry/kobalte/blocks/questionnaire";
7
import { NativeSelect, NativeSelectOption } from "~/components/ui/native-select";
8
import { Toaster } from "~/components/ui/toast";
9

10
const items = [
11
  {
12
    choices: [{ value: "inspect" }, { value: "tests" }, { value: "patch" }],
13
    name: "action",
14
    required: true,
15
  },
16
] as const;
17

18
export default function QuestionnaireShortcuts() {
19
  const [shortcuts, setShortcuts] = createSignal<QuestionnaireShortcutMode | undefined>("letters");
20

21
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
22
    event.preventDefault();
23

24
    const action = new FormData(event.currentTarget).get("action");
25

26
    toast("Next action selected", {
27
      description: `Action: ${action ?? "None"} · Shortcuts: ${shortcuts() ?? "none"}`,
28
    });
29
  }
30

31
  return (
32
    <div class="relative mx-auto flex h-full w-full max-w-md flex-col">
33
      <Toaster />
34
      <NativeSelect
35
        aria-label="Shortcut style"
36
        class="absolute end-0 top-0"
37
        value={shortcuts() ?? "none"}
38
        onChange={(event) => {
39
          const value = event.currentTarget.value;
40
          setShortcuts(value === "letters" || value === "numbers" ? value : undefined);
41
        }}
42
      >
43
        <NativeSelectOption value="none">No shortcuts</NativeSelectOption>
44
        <NativeSelectOption value="letters">Letters</NativeSelectOption>
45
        <NativeSelectOption value="numbers">Numbers</NativeSelectOption>
46
      </NativeSelect>
47

48
      <Questionnaire.Root
49
        class="mt-auto"
50
        items={items}
51
        shortcuts={shortcuts()}
52
        onSubmit={handleSubmit}
53
      >
54
        <Questionnaire.Item name="action" required>
55
          <Questionnaire.Title>What should the agent do next?</Questionnaire.Title>
56
          <Questionnaire.Description>
57
            Use the displayed shortcut or navigate with the keyboard.
58
          </Questionnaire.Description>
59
          <Questionnaire.Choices>
60
            <Questionnaire.Choice value="inspect">Inspect the implementation</Questionnaire.Choice>
61
            <Questionnaire.Choice value="tests">Run the relevant tests</Questionnaire.Choice>
62
            <Questionnaire.Choice value="patch">Prepare the patch</Questionnaire.Choice>
63
          </Questionnaire.Choices>
64
          <Questionnaire.Error />
65
        </Questionnaire.Item>
66

67
        <Questionnaire.Actions>
68
          <Questionnaire.Submit>Confirm action</Questionnaire.Submit>
69
        </Questionnaire.Actions>
70
      </Questionnaire.Root>
71
    </div>
72
  );
73
}

1
import { createSignal } from "solid-js";
2
import { toast } from "solid-sonner";
3
import { z } from "zod";
4
import { Questionnaire } from "@/registry/kobalte/blocks/questionnaire";
5
import { Card, CardAction, CardContent, CardFooter, CardHeader } from "~/components/ui/card";
6
import { Toaster } from "~/components/ui/toast";
7

8
const items = [
9
  { name: "detail", required: true },
10
  { name: "audience", required: true },
11
] as const;
12

13
const questionnaireSchema = z
14
  .object({
15
    detail: z.enum(["summary", "complete"]),
16
    audience: z.enum(["team", "public"]),
17
  })
18
  .superRefine((answers, context) => {
19
    if (answers.audience === "public" && answers.detail === "summary") {
20
      context.addIssue({
21
        code: "custom",
22
        message: "Public answers need enough context. Choose a complete answer.",
23
        path: ["detail"],
24
      });
25
    }
26
  });
27

28
type QuestionnaireItemName = keyof z.infer<typeof questionnaireSchema>;
29
type QuestionnaireErrors = Partial<Record<QuestionnaireItemName, string>>;
30

31
function ValidationProgress() {
32
  return (
33
    <Questionnaire.Progress class="min-w-0">
34
      {(state) => (
35
        <>
36
          {state.current} / {state.total}
37
        </>
38
      )}
39
    </Questionnaire.Progress>
40
  );
41
}
42

43
export default function QuestionnaireValidation() {
44
  const [item, setItem] = createSignal("detail");
45
  const [errors, setErrors] = createSignal<QuestionnaireErrors>({});
46

47
  function clearError(name: QuestionnaireItemName) {
48
    setErrors((currentErrors) => {
49
      if (!currentErrors[name]) {
50
        return currentErrors;
51
      }
52

53
      const nextErrors = { ...currentErrors };
54
      delete nextErrors[name];
55
      return nextErrors;
56
    });
57
  }
58

59
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
60
    event.preventDefault();
61

62
    const result = questionnaireSchema.safeParse(
63
      Object.fromEntries(new FormData(event.currentTarget)),
64
    );
65

66
    if (result.success) {
67
      setErrors({});
68
      toast("Agent response configured", {
69
        description: `Detail: ${result.data.detail} · Audience: ${result.data.audience}`,
70
      });
71
      return;
72
    }
73

74
    const nextErrors: QuestionnaireErrors = {};
75

76
    for (const issue of result.error.issues) {
77
      const name = issue.path[0];
78

79
      if ((name === "detail" || name === "audience") && !nextErrors[name]) {
80
        nextErrors[name] = issue.message;
81
      }
82
    }
83

84
    const firstInvalidItem = result.error.issues[0]?.path[0];
85

86
    setErrors(nextErrors);
87

88
    if (firstInvalidItem === "detail" || firstInvalidItem === "audience") {
89
      setItem(firstInvalidItem);
90
    }
91
  }
92

93
  return (
94
    <>
95
      <Toaster />
96
      <Questionnaire.Root
97
        class="mx-auto max-w-md"
98
        item={item()}
99
        items={items}
100
        onItemChange={setItem}
101
        onSubmit={handleSubmit}
102
      >
103
        <Card class="w-full">
104
          <Questionnaire.Item invalid={Boolean(errors().detail)} name="detail" required>
105
            <CardHeader>
106
              <Questionnaire.Title>How much detail should the answer include?</Questionnaire.Title>
107
              <Questionnaire.Description>Choose the response depth.</Questionnaire.Description>
108
              <CardAction>
109
                <ValidationProgress />
110
              </CardAction>
111
            </CardHeader>
112
            <CardContent>
113
              <Questionnaire.Choices>
114
                <Questionnaire.Choice value="summary" onChange={() => clearError("detail")}>
115
                  Concise summary
116
                </Questionnaire.Choice>
117
                <Questionnaire.Choice value="complete" onChange={() => clearError("detail")}>
118
                  Complete answer
119
                </Questionnaire.Choice>
120
              </Questionnaire.Choices>
121
              <Questionnaire.Error>{errors().detail}</Questionnaire.Error>
122
            </CardContent>
123
          </Questionnaire.Item>
124

125
          <Questionnaire.Item invalid={Boolean(errors().audience)} name="audience" required>
126
            <CardHeader>
127
              <Questionnaire.Title>Who will read the answer?</Questionnaire.Title>
128
              <Questionnaire.Description>
129
                Public answers require complete context.
130
              </Questionnaire.Description>
131
              <CardAction>
132
                <ValidationProgress />
133
              </CardAction>
134
            </CardHeader>
135
            <CardContent>
136
              <Questionnaire.Choices>
137
                <Questionnaire.Choice value="team" onChange={() => clearError("audience")}>
138
                  My team
139
                </Questionnaire.Choice>
140
                <Questionnaire.Choice value="public" onChange={() => clearError("audience")}>
141
                  Public audience
142
                </Questionnaire.Choice>
143
              </Questionnaire.Choices>
144
              <Questionnaire.Error>{errors().audience}</Questionnaire.Error>
145
            </CardContent>
146
          </Questionnaire.Item>
147

148
          <CardFooter>
149
            <Questionnaire.Actions>
150
              <Questionnaire.Previous />
151
              <Questionnaire.Next>Next</Questionnaire.Next>
152
              <Questionnaire.Submit>Validate answers</Questionnaire.Submit>
153
            </Questionnaire.Actions>
154
          </CardFooter>
155
        </Card>
156
      </Questionnaire.Root>
157
    </>
158
  );
159
}

1
import { createSignal } from "solid-js";
2
import { toast } from "solid-sonner";
3
import { Questionnaire } from "@/registry/kobalte/blocks/questionnaire";
4
import { Toaster } from "~/components/ui/toast";
5

6
const items = [
7
  { name: "scope", required: true },
8
  { name: "checks", required: true },
9
  { name: "output", required: true },
10
] as const;
11

12
const itemLabels: Record<string, string> = {
13
  scope: "Change scope",
14
  checks: "Verification",
15
  output: "Final output",
16
};
17

18
export default function QuestionnaireControlled() {
19
  const [item, setItem] = createSignal("scope");
20

21
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
22
    event.preventDefault();
23

24
    const formData = new FormData(event.currentTarget);
25

26
    toast("Agent workflow configured", {
27
      description: `Scope: ${formData.get("scope") ?? "None"} · Verification: ${formData.get("checks") ?? "None"} · Output: ${formData.get("output") ?? "None"}`,
28
    });
29
  }
30

31
  return (
32
    <div class="relative mx-auto flex h-full w-full max-w-md flex-col">
33
      <Toaster />
34
      <p class="absolute end-0 top-0 text-muted-foreground text-sm" role="status">
35
        Current checkpoint: {itemLabels[item()]}
36
      </p>
37

38
      <Questionnaire.Root
39
        class="mt-auto"
40
        item={item()}
41
        items={items}
42
        onItemChange={setItem}
43
        onSubmit={handleSubmit}
44
      >
45
        <Questionnaire.Progress />
46

47
        <Questionnaire.Item name="scope" required>
48
          <Questionnaire.Title>What may the agent change?</Questionnaire.Title>
49
          <Questionnaire.Description>
50
            The host stores the active checkpoint while Questionnaire navigates.
51
          </Questionnaire.Description>
52
          <Questionnaire.Choices>
53
            <Questionnaire.Choice value="component">Only the target component</Questionnaire.Choice>
54
            <Questionnaire.Choice value="tests">Component and related tests</Questionnaire.Choice>
55
            <Questionnaire.Choice value="feature">The complete feature area</Questionnaire.Choice>
56
          </Questionnaire.Choices>
57
          <Questionnaire.Error />
58
        </Questionnaire.Item>
59

60
        <Questionnaire.Item name="checks" required>
61
          <Questionnaire.Title>Which verification level should it use?</Questionnaire.Title>
62
          <Questionnaire.Choices>
63
            <Questionnaire.Choice value="targeted">Targeted tests</Questionnaire.Choice>
64
            <Questionnaire.Choice value="package">Package tests and typecheck</Questionnaire.Choice>
65
            <Questionnaire.Choice value="full">Full workspace verification</Questionnaire.Choice>
66
          </Questionnaire.Choices>
67
          <Questionnaire.Error />
68
        </Questionnaire.Item>
69

70
        <Questionnaire.Item name="output" required>
71
          <Questionnaire.Title>What should the agent return when finished?</Questionnaire.Title>
72
          <Questionnaire.Choices>
73
            <Questionnaire.Choice value="summary">Concise summary</Questionnaire.Choice>
74
            <Questionnaire.Choice value="diff">Summary with changed files</Questionnaire.Choice>
75
            <Questionnaire.Choice value="handoff">
76
              Detailed implementation handoff
77
            </Questionnaire.Choice>
78
          </Questionnaire.Choices>
79
          <Questionnaire.Error />
80
        </Questionnaire.Item>
81

82
        <Questionnaire.Actions>
83
          <Questionnaire.Previous />
84
          <Questionnaire.Next>Next</Questionnaire.Next>
85
          <Questionnaire.Submit>Save workflow</Questionnaire.Submit>
86
        </Questionnaire.Actions>
87
      </Questionnaire.Root>
88
    </div>
89
  );
90
}