53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
|
|
import React from "react";
|
|
|
|
const FormInputView = ({
|
|
groupedFields,
|
|
name,
|
|
groupedFieldsTwo,
|
|
errors,
|
|
onSubmit,
|
|
children,
|
|
}) => {
|
|
console.log(groupedFields);
|
|
|
|
return (
|
|
<form>
|
|
{Object?.entries(groupedFields, groupedFieldsTwo).map(
|
|
([section, fields], index) => (
|
|
<Box key={section}>
|
|
<Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
|
|
{section}
|
|
</Heading>
|
|
<Box display={"flex"} gap={0}>
|
|
<Box
|
|
width={"100%"}
|
|
p={5}
|
|
display={"flex"}
|
|
flexWrap={"wrap"}
|
|
gap={4}
|
|
>
|
|
{fields.map(({ value, label, id, width }, key) => (
|
|
<Box w={!width ? "49%" : width}>
|
|
<FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
|
|
{label}
|
|
</FormLabel>
|
|
<FormLabel>{value}</FormLabel>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
{index <
|
|
Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
|
|
<Divider />
|
|
)}
|
|
</Box>
|
|
)
|
|
)}
|
|
{children}
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default FormInputView;
|