car-crushers-portal/components/NewInfractionModal.tsx

69 lines
1.9 KiB
TypeScript

import {
Button,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Select,
Text,
} from "@chakra-ui/react";
export default function (props: { isOpen: boolean; onClose: () => void }) {
function reset() {
(
document.getElementById("punishment") as unknown as HTMLSelectElement
).selectedIndex = -1;
(document.getElementById("user") as HTMLInputElement).value = "";
(document.getElementById("evidence") as HTMLInputElement).value = "";
props.onClose();
}
async function submit() {}
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>
<ModalFooter>
<Button colorScheme="ghost" onClick={reset}>
Cancel
</Button>
<Button
colorScheme="blue"
ml="8px"
onClick={async () => await submit()}
>
Submit
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}