feat: feedback component

closes #46

app/components/ContentViewer/ContentViewer.module.css

@@ -5,7 +5,7 @@
   overflow-y: auto;
   flex: 1;
   padding-right: 14px;
-  padding-bottom: 32px;
+  padding-bottom: 12px;
   padding-left: 14px;
 }
 .contentWrapper {

app/components/ContentViewer/ContentViewer.tsx

@@ -1,13 +1,15 @@
 import styles from "./ContentViewer.module.css";
-
+import Feedback from "../Feedback";
 export default function ContentViewer({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <div className={styles.contentWrapper}>
-      <div className={styles.content}>{children}</div>
+      <div className={styles.content}>
+        {children} <Feedback />
+      </div>
     </div>
   );
 }

app/components/Feedback/Feedback.module.css

@@ -0,0 +1,4 @@
+.feedbackSubmitted {
+  color: hsl(var(--text) / 0.5);
+  font-size: small;
+}

app/components/Feedback/Feedback.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Like from "@/app/styles/icons/BiLike";
+import Dislike from "@/app/styles/icons/BiDislike";
+import { Flex } from "@chakra-ui/react";
+import { usePathname } from "next/navigation";
+import styles from "./Feedback.module.css";
+
+export default function Feedback() {
+  const APIRoute =
+    "https://script.google.com/macros/s/AKfycbz0f87eDgEghSelILb3RSdHe-Rr7HKAdMxx8tvTq4fNAfJt0fZ7t-G-p1BrVEQM2Mws/exec";
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const pathname = usePathname();
+  const submitFeedback = async (feedback: string) => {
+    await fetch(APIRoute, {
+      method: "POST",
+      body: JSON.stringify({
+        feedback: feedback,
+        path: pathname,
+      }),
+    });
+    const feedbackStorage = localStorage.getItem("feedback");
+    if (feedbackStorage) {
+      const feedbackData = JSON.parse(feedbackStorage);
+      feedbackData.push(pathname);
+      localStorage.setItem("feedback", JSON.stringify(feedbackData));
+    }
+  };
+
+  useEffect(() => {
+    const feedbackStorage = localStorage.getItem("feedback");
+    if (feedbackStorage) {
+      const feedbackData = JSON.parse(feedbackStorage);
+      if (feedbackData.includes(pathname)) {
+        setIsSubmitted(true);
+      }
+    } else {
+      localStorage.setItem("feedback", JSON.stringify([]));
+    }
+  }, []);
+
+  if (isSubmitted) {
+    return (
+      <Flex
+        dir="row"
+        justifyContent={"end"}
+        gap={"10px"}
+        className={styles.feedbackSubmitted}
+      >
+        Feedback submitted. Thank you!
+      </Flex>
+    );
+  }
+  return (
+    <Flex dir="row" justifyContent={"end"} gap={"10px"}>
+      <button
+        onClick={() => {
+          submitFeedback("like");
+          setIsSubmitted(true);
+        }}
+      >
+        <Like />
+      </button>
+      <button
+        onClick={() => {
+          submitFeedback("dislike");
+          setIsSubmitted(true);
+        }}
+      >
+        <Dislike />
+      </button>
+    </Flex>
+  );
+}

app/components/Feedback/index.tsx

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

app/styles/icons/BiDislike.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./BiLikeDislike.module.css";
+
+export default function Icon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.main}
+    >
+      <path
+        d="M20 3H6.693C6.28611 3.00135 5.88922 3.12616 5.55478 3.35792C5.22035 3.58969 4.96413 3.91749 4.82 4.298L2.063 11.649C2.02114 11.7613 1.9998 11.8802 2 12V14C2 15.103 2.897 16 4 16H9.612L8.49 19.367C8.38997 19.6676 8.36264 19.9877 8.41027 20.301C8.4579 20.6142 8.57913 20.9117 8.764 21.169C9.14 21.689 9.746 22 10.388 22H12C12.297 22 12.578 21.868 12.769 21.64L17.469 16H20C21.103 16 22 15.103 22 14V5C22 3.897 21.103 3 20 3ZM11.531 20H10.386L11.948 15.316C11.998 15.1657 12.0117 15.0058 11.9878 14.8492C11.9639 14.6926 11.9032 14.544 11.8106 14.4155C11.7181 14.287 11.5963 14.1823 11.4554 14.1101C11.3144 14.0379 11.1584 14.0001 11 14H4V12.181L6.693 5H16V14.638L11.531 20ZM18 14V5H20L20.001 14H18Z"
+        fill="hsl(var(--text)/0.5)"
+        className={styles.path}
+      />
+    </svg>
+  );
+}

app/styles/icons/BiLike.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./BiLikeDislike.module.css";
+
+export default function BiLike() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.main}
+    >
+      <path
+        d="M20 8H14.388L15.511 4.633C15.713 4.025 15.611 3.351 15.236 2.831C14.861 2.311 14.253 2 13.612 2H12C11.703 2 11.422 2.132 11.231 2.36L6.531 8H4C2.897 8 2 8.897 2 10V19C2 20.103 2.897 21 4 21H17.307C17.7139 20.9986 18.1108 20.8738 18.4452 20.6421C18.7797 20.4103 19.0359 20.0825 19.18 19.702L21.937 12.351C21.9789 12.2387 22.0002 12.1198 22 12V10C22 8.897 21.103 8 20 8ZM4 10H6V19H4V10ZM20 11.819L17.307 19H8V9.362L12.468 4H13.614L12.052 8.683C12.0013 8.83332 11.9871 8.99355 12.0107 9.15043C12.0343 9.3073 12.095 9.45629 12.1877 9.58504C12.2803 9.71379 12.4024 9.8186 12.5436 9.89076C12.6849 9.96293 12.8414 10.0004 13 10H20V11.819Z"
+        fill="hsl(var(--text)/0.5)"
+        className={styles.path}
+      />
+    </svg>
+  );
+}

app/styles/icons/BiLikeDislike.module.css

@@ -0,0 +1,7 @@
+.main {
+  cursor: pointer;
+}
+
+.main:hover .path {
+  fill: hsl(var(--text));
+}