Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 72x | import { Control, FieldValues } from "react-hook-form";
import { Section } from "shared-types";
import { FormLabel } from "../Inputs";
import { DependencyWrapper, RHFFormGroup } from ".";
import { cn } from "@/utils";
export const RHFSection = <TFieldValues extends FieldValues>(props: {
section: Section;
formId: string;
control: Control<TFieldValues>;
}) => {
return (
<DependencyWrapper {...props.section}>
<div>
{props.section.title && (
<div
className={
"py-3 px-8 w-full " +
(props.section.subsection ? "bg-gray-300 text-2xl" : "bg-primary text-white text-3xl")
}
>
<FormLabel className="font-bold">{props.section.title}</FormLabel>
</div>
)}
{props.section.form?.length > 0 && (
<div className={cn(props.section.sectionWrapperClassname, "px-8 py-6 space-y-6")}>
{props.section.form.map((FORM, index) => (
<RHFFormGroup
key={`rhf-form-${index}-${FORM.description}`}
parentId={props.formId + "_" + props.section.sectionId + "_"}
control={props.control}
form={FORM}
/>
))}
</div>
)}
</div>
</DependencyWrapper>
);
};
|