51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
|
|
import React from "react";
|
|
|
|
const FormInputView = ({
|
|
groupedFields,
|
|
name,
|
|
groupedFieldsTwo,
|
|
errors,
|
|
onSubmit,
|
|
children,
|
|
}) => {
|
|
|
|
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%"}
|
|
display={"flex"}
|
|
flexWrap={"wrap"}
|
|
gap={4}
|
|
>
|
|
{fields.map(({ value, label, id, width, btn, arabic, type }, key) => (
|
|
<Box w={!width ? "49%" : width}>
|
|
<FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
|
|
{label}
|
|
</FormLabel>
|
|
<FormLabel border={'1px solid #E4EAF1'} bg={'#ccc3'} p={2} pt={1.5} pb={1.5} rounded={'xs'} textAlign={arabic? 'right':'left'} fontSize={'sm'}>{type==="number" ? value+" /-" : value }</FormLabel>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
{/* </Box> */}
|
|
{index <
|
|
Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
|
|
<Divider />
|
|
)}
|
|
</Box>
|
|
)
|
|
)}
|
|
{children}
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default FormInputView;
|