Finish base of inactivity notice modal

components/NewInactivityNotice.tsx

@@ -1,17 +1,39 @@
 import {
+  Checkbox,
+  CheckboxGroup,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  Text,
+  Textarea,
+  VStack,
 } from "@chakra-ui/react";
+import { useState } from "react";
 
 export default function (props: {
   departments: string[];
   isOpen: boolean;
   onClose: () => void;
 }) {
+  const [departments, setDepartments] = useState([] as string[]);
+  function reset() {
+    (document.getElementById("start") as HTMLInputElement).value = "";
+    (document.getElementById("end") as HTMLInputElement).value = "";
+    (document.getElementById("reason") as HTMLTextAreaElement).value = "";
+
+    props.onClose();
+  }
+
+  async function submit() {
+    const start = (document.getElementById("start") as HTMLInputElement).value;
+    const end = (document.getElementById("start") as HTMLInputElement).value;
+    const reason = (document.getElementById("reason") as HTMLTextAreaElement)
+      .value;
+  }
+
   return (
     <>
       <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
@@ -19,7 +41,32 @@ export default function (props: {
         <ModalContent>
           <ModalHeader>New Inactivity Notice</ModalHeader>
           <ModalCloseButton />
-          <ModalBody></ModalBody>
+          <ModalBody>
+            <Text>Start Date</Text>
+            <input id="start" type="date" />
+            <br />
+            <br />
+            <Text>End Date</Text>
+            <input id="end" type="date" />
+            <br />
+            <br />
+            <Text>Reason</Text>
+            <Textarea
+              id="reason"
+              placeholder="Your reason for making this inactivity notice"
+            />
+            <br />
+            <br />
+            <CheckboxGroup onChange={(a: string[]) => setDepartments(a)}>
+              <VStack>
+                {props.departments.map((d) => (
+                  <Checkbox key={d} value={d}>
+                    {d}
+                  </Checkbox>
+                ))}
+              </VStack>
+            </CheckboxGroup>
+          </ModalBody>
         </ModalContent>
       </Modal>
     </>