Created a quiz exit button and feedback form

nepalingo-web/src/App.tsx

@@ -9,19 +9,27 @@ import About from "@/components/header/About";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { PrivateRoutes } from "@/components/PrivateRoutes";
+import FeedbackForm from "@/components/FeedbackForm";
 import TestYourself from "@/pages/TestYourself";
 import SignUp from "./pages/SignUp";
 
 const App: React.FC = () => {
   const TrackingID = import.meta.env.VITE_GOOGLE_ANALYTICS_TRACKING_ID;
   ReactGA.initialize(TrackingID);
 
+  const handleFeedbackFormClose = () => {
+    console.log("Feedback form closed");
+  };
   return (
     <div className="mx-5 min-[1200px]:mx-auto max-w-[1200px] ">
       <Router>
         <Routes>
           <Route path="/about" element={<About />} />
           <Route path="/login" element={<Login />} />
+          <Route
+            path="/feedback"
+            element={<FeedbackForm onClose={handleFeedbackFormClose} />}
+          />
           <Route path="/signup" element={<SignUp />} />
           <Route path="/reset-password" element={<ResetPassword />} />
           <Route path="/reset-password-email" element={<PasswordEmail />} />

nepalingo-web/src/components/FeedbackForm.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { supabaseClient } from "@/config/supabase-client";
+
+interface FeedbackFormProps {
+  onClose: () => void;
+}
+
+const FeedbackForm: React.FC<FeedbackFormProps> = ({ onClose }) => {
+  const [rating, setRating] = useState<number | null>(null);
+  const [emojiRating, setEmojiRating] = useState<number | null>(null);
+  const [comments, setComments] = useState<string>("");
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    if (rating === null || emojiRating === null) {
+      setError("Please provide both a star and emoji rating.");
+      return;
+    }
+
+    // Insert feedback into Supabase
+    const { error: insertError } = await supabaseClient
+      .from("feedback")
+      .insert([{ rating, emoji_rating: emojiRating, comments }]);
+
+    if (insertError) {
+      console.error("Error inserting feedback:", insertError);
+      return;
+    }
+
+    setSubmitted(true);
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-lg shadow-md relative">
+      {submitted ? (
+        <div className="text-center">
+          <button
+            className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-3xl p-2"
+            onClick={handleClose}
+          >
+            &times;
+          </button>
+          <p className="text-lg font-semibold mb-4 text-green-600">
+            Thank you for your feedback! 🎉
+          </p>
+        </div>
+      ) : (
+        <>
+          <button
+            className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+            onClick={handleClose}
+          >
+            &times;
+          </button>
+          <h2 className="text-lg font-semibold mb-4 text-gray-800">
+            We value your feedback! 🌟
+          </h2>
+          <p className="mb-4 text-gray-700">
+            How would you rate your experience with Nepalingo?
+          </p>
+
+          <div className="mb-4">
+            <p className="mb-2 text-gray-800">Rate with stars:</p>
+            <div className="flex">
+              {[1, 2, 3, 4, 5].map((star) => (
+                <button
+                  key={star}
+                  className={`text-3xl ${star <= (rating || 0) ? "text-yellow-500" : "text-gray-400"}`}
+                  onClick={() => setRating(star)}
+                >
+                  ★
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="mb-4">
+            <p className="mb-2 text-gray-800">Rate with emojis:</p>
+            <div className="flex">
+              {["😟", "😐", "😊", "😃", "😍"].map((emoji, index) => (
+                <button
+                  key={index}
+                  className={`text-3xl px-2 transition-transform duration-200 transform ${
+                    emojiRating === index + 1
+                      ? "outline outline-2 outline-green-500 scale-125"
+                      : ""
+                  }`}
+                  onClick={() => setEmojiRating(index + 1)}
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {error && <p className="text-red-500 mb-4">{error}</p>}
+
+          <textarea
+            className="w-full p-2 border border-gray-300 rounded mb-4"
+            placeholder="Tell us more about your experience..."
+            value={comments}
+            onChange={(e) => setComments(e.target.value)}
+          />
+
+          <button
+            className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
+            onClick={handleSubmit}
+          >
+            Submit
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default FeedbackForm;

nepalingo-web/src/components/header/Header.tsx

@@ -13,6 +13,10 @@ const Header: React.FC = () => {
         </Link>
       </div>
       <div className="flex flex-row justify-between items-center gap-4">
+        {/* TODO: Move TO THE LEFT */}
+        <a href="/feedback" className="text-white hover:underline">
+          FeedbackForm
+        </a>
         <a href="/about" className="text-white hover:underline">
           About
         </a>

nepalingo-web/src/components/randomQuotes.tsx

@@ -7,7 +7,6 @@ const RandomQuoteComponent: React.FC = () => {
   if (!randomQuote) {
     return <div>Loading...</div>;
   }
-
   const { text, translation } = randomQuote;
 
   return (

nepalingo-web/src/hooks/useQuotes.tsx

@@ -3,6 +3,7 @@ import { useLanguage } from "@/hooks/Langauge";
 
 interface Quote {
   text: string;
+
   translation: string;
 }
 export interface QuotesResponse {

nepalingo-web/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { useAuth } from "@/hooks/Auth";
@@ -7,6 +7,7 @@ import GreetingCard from "@/components/GreetingCard";
 import ActivityCard from "@/components/ActivityCard";
 import { useLanguage } from "@/hooks/Langauge";
 import StreakDisplay from "@/components/header/StreakDisplay";
+import FeedbackForm from "@/components/FeedbackForm";
 import RandomQuoteComponent from "@/components/randomQuotes";
 
 const Home: React.FC = () => {
@@ -18,6 +19,15 @@ const Home: React.FC = () => {
   const navigate = useNavigate();
   const { user } = useAuth();
   const { selectedLanguage } = useLanguage();
+  const [isFeedbackFormOpen, setIsFeedbackFormOpen] = useState(false);
+
+  const handleOpenFeedbackForm = () => {
+    setIsFeedbackFormOpen(true);
+  };
+
+  const handleCloseFeedbackForm = () => {
+    setIsFeedbackFormOpen(false);
+  };
 
   return (
     <>
@@ -83,6 +93,21 @@ const Home: React.FC = () => {
             </div>
           </div>
         </div>
+
+        <div className="flex h-16 max-h-12 items-center justify-between py-4 px-5 bg-white-sidebar border-black">
+          <button
+            onClick={handleOpenFeedbackForm}
+            className="bg-white-500 text-black px-2 py-1 rounded-md hover:bg-red-600"
+          >
+            Give Feedback
+          </button>
+        </div>
+
+        {isFeedbackFormOpen && (
+          <div className="fixed inset-0 bg-white-800 bg-opacity-50 flex justify-center items-center">
+            <FeedbackForm onClose={handleCloseFeedbackForm} />
+          </div>
+        )}
       </div>
     </>
   );