42 lines
1.1 KiB
React
42 lines
1.1 KiB
React
|
import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
|
||
|
|
import React from "react";
|
||
|
|
|
||
|
|
const FormInputView = ({ groupedFields, name, errors, onSubmit, children }) => {
|
||
|
|
|
||
|
|
console.log(groupedFields);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form>
|
||
|
|
{Object.entries(groupedFields).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 }, key) => (
|
||
|
|
<Box w={'49%'}>
|
||
|
|
<FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
|
||
|
|
{label}
|
||
|
|
</FormLabel>
|
||
|
|
<FormLabel>{value}</FormLabel>
|
||
|
|
</Box>
|
||
|
|
))}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
{index < Object.entries(groupedFields).length - 1 && <Divider />}
|
||
|
|
</Box>
|
||
|
|
))}
|
||
|
|
{children}
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FormInputView;
|