NewInfractionModal.tsx

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

export default function (props: { isOpen: boolean; onClose: () => void }) {
  return (
    <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>New Infraction</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text>User ID</Text>
          <Input id="user" placeholder="1234567890987654321" />
          <br />
          <br />
          <Text>Punishment</Text>
          <Select id="punishment" placeholder="Select punishment">
            <option value="verbal">Verbal Warning</option>
            <option value="warn">Warning</option>
            <option value="mute">Mute</option>
            <option value="ban_temp">Temporary Ban</option>
            <option value="ban_perm">Permanent Ban</option>
            <option value="ban_unappealable">Unappealable Permanent Ban</option>
          </Select>
          <br />
          <br />
          <Text>Evidence</Text>
          <Button>Select Files</Button>
          <input id="evidence" multiple type="file" />
        </ModalBody>
      </ModalContent>
    </Modal>
  );
}