tanami-admin-panel/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx

import {
  Box,
  Button,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  Textarea,
} from "@chakra-ui/react";

const AmountInvested = ({ isOpen, onClose }) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Amount Invested</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Box mb={"15px"}>
            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
              Date
            </Text>
            <Input
              placeholder="Select Date"
              size="md"
              type="date"
              fontSize={"sm"}
            />
          </Box>

          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
            <Text as={"label"}>Amount</Text>
            <Input placeholder="Enter amount" fontSize={"sm"} />
          </Box>

          <Box mb={"15px"}>
            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
              Comments
            </Text>
            <Textarea placeholder="Write Comments" fontSize={"sm"} />
          </Box>
        </ModalBody>
        <ModalFooter>
          <Button
            bg={"hsla(139, 100%, 14%, 1)"}
            mr={3}
            color={"#fff"}
            _hover={{
              bg: "hsl(139deg 98.99% 26.59%)",
            }}
          >
            Save
          </Button>
          <Button mr={3} onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default AmountInvested;