Merge pull request #55 from debater-coder/39-add-feedback-form-to-timetabl

feat: add formspree feedback from to Timetabl

Author: debater-coder

package-lock.json

@@ -34,6 +34,7 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@fontsource/poppins": "^4.5.8",
+    "@formspree/react": "^2.4.1",
     "@nikolovlazar/chakra-ui-prose": "^1.2.1",
     "@react-three/drei": "^9.45.1",
     "@react-three/fiber": "^8.9.1",

package.json

@@ -13,6 +13,7 @@ import {
 import Announcements from "./routes/Main/Announcements";
 import Barcodes from "./routes/Main/Barcodes";
 import { Calendar } from "./routes/Main/Calendar";
+import { Feedback } from "./routes/Main/Feedback";
 import Home from "./routes/Main/Home";
 
 const ComingSoon = () => <>Coming soon...</>;
@@ -89,7 +90,7 @@ export const routes: { pinned: TimetablRoute[]; unpinned: TimetablRoute[] } = {
       name: "Feedback",
       icon: ChatsTeardrop,
       mirrored: false,
-      element: <ComingSoon />,
+      element: <Feedback />,
     },
 
     {

src/routes.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  Textarea,
+} from "@chakra-ui/react";
+import { useForm, ValidationError } from "@formspree/react";
+
+export const Feedback = () => {
+  const [state, handleSubmit] = useForm("meqdbykn");
+  if (state.succeeded) {
+    return <p>Thanks for the feedback!</p>;
+  }
+  return (
+    <Flex
+      as="form"
+      onSubmit={handleSubmit}
+      w="full"
+      pr={8}
+      maxW="2xl"
+      direction={"column"}
+      gap={4}
+    >
+      <FormControl>
+        <FormLabel>Email address</FormLabel>
+        <Input
+          type="email"
+          id="email"
+          name="email"
+          placeholder="[email protected]"
+        />
+      </FormControl>
+      <ValidationError prefix="Email" field="email" errors={state.errors} />
+
+      <FormControl>
+        <FormLabel>Message</FormLabel>
+        <Textarea id="message" name="message" placeholder="I love this app!" />
+      </FormControl>
+      <ValidationError prefix="Message" field="message" errors={state.errors} />
+
+      <Button
+        type="submit"
+        isLoading={state.submitting}
+        loadingText="Submitting..."
+      >
+        Submit
+      </Button>
+    </Flex>
+  );
+};

src/routes/Main/Feedback/Feedback.tsx

@@ -0,0 +1 @@
+export { Feedback } from "./Feedback";