tanami-admin-panel/src/Components/FormInputView.jsx

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;