47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import CheckboxGroup from "../../../../components/controls/CheckboxGroup";
|
|
import { useMessages } from "../../../../contexts/MessagesContext";
|
|
import { useCreateFlow } from "../../context/CreateFlowContext";
|
|
import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
|
|
import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
|
|
import {
|
|
setupTraitsFromTickedIds,
|
|
tickedSetupTraitIds,
|
|
} from "../../../../../lib/create/setupTraits";
|
|
|
|
/**
|
|
* Create Community — Figma Flow - Checkboxes (25224:105566).
|
|
*/
|
|
export function SetupQuestionsScreen() {
|
|
const copy = useMessages().create.community.setupQuestions;
|
|
const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
|
|
|
|
return (
|
|
<CreateFlowTwoColumnSelectShell
|
|
header={
|
|
<CreateFlowHeaderLockup
|
|
title={copy.title}
|
|
description={copy.description}
|
|
justification="left"
|
|
/>
|
|
}
|
|
>
|
|
<CheckboxGroup
|
|
value={tickedSetupTraitIds(state.setupTraits)}
|
|
onChange={({ value }) => {
|
|
markCreateFlowInteraction();
|
|
updateState({ setupTraits: setupTraitsFromTickedIds(value) });
|
|
}}
|
|
options={copy.questions.map((question) => ({
|
|
value: question.id,
|
|
label: question.label,
|
|
subtext: question.help,
|
|
}))}
|
|
aria-label={copy.title}
|
|
className="flex w-full flex-col gap-[20px] !space-y-0"
|
|
/>
|
|
</CreateFlowTwoColumnSelectShell>
|
|
);
|
|
}
|