Prompt for reason for skipping.

Note: skipping is only half implemented for labelling and summarisation tasks as those probably need to be changed to use the new Task component.

website/src/components/Buttons/Skip.tsx

@@ -1,9 +1,63 @@
-import { Button, ButtonProps } from "@chakra-ui/react";
+import {
+  Button,
+  ButtonProps,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Textarea,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import { FaChevronDown } from "react-icons/fa";
+
+interface SkipButtonProps extends ButtonProps {
+  onSkip: (reason: string) => void;
+}
+
+export const SkipButton = ({ onSkip, ...props }: SkipButtonProps) => {
+  const { isOpen, onOpen: showModal, onClose: closeModal } = useDisclosure();
+  const [value, setValue] = useState("");
+
+  const onSubmit = () => {
+    onSkip(value);
+    setValue("");
+    closeModal();
+  };
 
-export const SkipButton = ({ children, ...props }: ButtonProps) => {
   return (
-    <Button size="lg" variant="outline" {...props}>
-      {children}
-    </Button>
+    <>
+      <Button size="lg" variant="outline" onClick={showModal} {...props}>
+        Skip
+      </Button>
+      <Modal isOpen={isOpen} onClose={closeModal}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Skip</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Textarea
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              resize="none"
+              placeholder="Any feedback on this task?"
+            />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onSubmit}>
+              Send
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };