function PrimaryInfo()

in next-demo/next-pages/src/pages/demoForm.tsx [192:339]
147 lines of code
1 McCabe index (conditional complexity)

function PrimaryInfo({ lens }: { lens: ILens<PersonDetails['primaryInfo']> }) {
    return (
        <>
            <FlexRow>
                <RichTextView>
                    <h3>Primary Info</h3>
                </RichTextView>
                <Tooltip
                    offset={[0, 3]}
                    content='You have no permission to edit this information'
                >
                    <IconContainer
                        icon={infoIcon}
                        cx={css.infoIcon}
                    />
                </Tooltip>
            </FlexRow>

            <FlexRow
                vPadding='12'
                spacing='18'
                alignItems='top'
            >
                <LabeledInput
                    htmlFor='status'
                    label='Status'
                    {...lens.prop('status').toProps()}
                >
                    <TextInput
                        {...lens.prop('status').toProps()}
                        placeholder='Select Status'
                        id='status'
                    />
                </LabeledInput>
                <LabeledInput
                    htmlFor='productionCategory'
                    label='Production Category'
                    {...lens.prop('productionCategory').toProps()}
                >
                    <TextInput
                        {...lens.prop('productionCategory').toProps()}
                        placeholder='Select Category'
                        id='productionCategory'
                    />
                </LabeledInput>
            </FlexRow>
            <FlexRow
                vPadding='12'
                spacing='18'
                alignItems='top'
            >
                <FlexCell minWidth={324}>
                    <LabeledInput
                        htmlFor='organizationalCategory'
                        label='Organizational category'
                        {...lens.prop('organizationalCategory').toProps()}
                    >
                        <TextInput
                            {...lens.prop('organizationalCategory').toProps()}
                            placeholder='Select Organizational Category'
                            id='organizationalCategory'
                        />
                    </LabeledInput>
                </FlexCell>
                <FlexRow spacing='18'>
                    <FlexCell minWidth={186}>
                        <LabeledInput
                            htmlFor='jobFunction'
                            label='Job Function'
                            {...lens.prop('jobFunction').toProps()}
                        >
                            <TextInput
                                {...lens.prop('jobFunction').toProps()}
                                placeholder='Select Job Function'
                                id='jobFunction'
                            />
                        </LabeledInput>
                    </FlexCell>
                    <FlexCell minWidth={120}>
                        <LabeledInput
                            htmlFor='jobFunctionLevel'
                            label='Job Function Level'
                            {...lens.prop('jobFunctionLevel').toProps()}
                        >
                            <TextInput
                                {...lens.prop('jobFunctionLevel').toProps()}
                                placeholder='Select Level'
                                id='jobFunctionLevel'
                            />
                        </LabeledInput>
                    </FlexCell>
                </FlexRow>
            </FlexRow>
            <FlexRow
                vPadding='12'
                spacing='18'
                alignItems='top'
            >
                <FlexCell minWidth={324}>
                    <FlexRow spacing='18'>
                        <FlexCell minWidth={120}>
                            <LabeledInput
                                htmlFor='currentProject'
                                label='Current Project'
                                {...lens.prop('currentProject').toProps()}
                            >
                                <TextInput
                                    {...lens.prop('currentProject').toProps()}
                                    placeholder='Select Project'
                                    id='currentProject'
                                />
                            </LabeledInput>
                        </FlexCell>
                        <FlexCell minWidth={186}>
                            <LabeledInput
                                htmlFor='projectRole'
                                label='Role'
                                {...lens.prop('projectRole').toProps()}
                            >
                                <TextInput
                                    {...lens.prop('projectRole').toProps()}
                                    placeholder='Select Role'
                                    id='projectRole'
                                />
                            </LabeledInput>
                        </FlexCell>
                    </FlexRow>
                </FlexCell>
                <FlexRow
                    size='48'
                    spacing='18'
                    alignItems='bottom'
                >
                    <Switch
                        label='Time Reporting'
                        {...lens.prop('timeReporting').toProps()}
                        isDisabled
                    />
                    <Switch
                        label='Remote'
                        {...lens.prop('remoteStatus').toProps()}
                        isDisabled
                    />
                </FlexRow>
            </FlexRow>
        </>
    );
}