hackathon-feedback

nepalingo-web/src/App.tsx

@@ -7,6 +7,7 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { PrivateRoutes } from "@/components/PrivateRoutes";
 import { LanguageProvider } from "./contexts/LanguageContext";
+import QuizComponent from './components/QuizComponent';
 import RandomQuoteComponent from "./components/randomQuotes";
 
 const App: React.FC = () => {
@@ -26,7 +27,11 @@ const App: React.FC = () => {
             <Route path="/dictionary" element={<DictionaryPage />} />
           </Route>
         </Routes>
-      </Router></>
+      </Router>
+      <div className="min-h-screen flex justify-center items-center">
+      <QuizComponent />
+    </div>
+    </>
   );
 };
 

nepalingo-web/src/components/ExitModal.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import FeedbackForm from './FeedbackForm';
+
+interface ExitModalProps {
+  onClose: () => void;
+}
+
+const ExitModal: React.FC<ExitModalProps> = ({ onClose }) => {
+  const [showFeedbackForm, setShowFeedbackForm] = useState(false);
+
+  const handleYesClick = () => {
+    setShowFeedbackForm(true);
+  };
+
+  const handleNoClick = () => {
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center">
+      {!showFeedbackForm ? (
+        <div className="bg-white p-6 rounded-lg">
+          <h2 className="text-lg mb-4">Are you sure you want to exit?</h2>
+          <div className="flex justify-between">
+            <button
+              className="bg-green-500 text-white px-4 py-2 rounded-md"
+              onClick={handleYesClick}
+            >
+              Yes
+            </button>
+            <button
+              className="bg-gray-500 text-white px-4 py-2 rounded-md"
+              onClick={handleNoClick}
+            >
+              No
+            </button>
+          </div>
+        </div>
+      ) : (
+        <FeedbackForm onClose={onClose} />
+      )}
+    </div>
+  );
+};
+
+export default ExitModal;

nepalingo-web/src/components/FeedbackForm.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+interface FeedbackFormProps {
+  onClose: () => void;
+}
+
+const FeedbackForm: React.FC<FeedbackFormProps> = ({ onClose }) => {
+  const [rating, setRating] = useState<number | null>(null);
+
+  const handleRating = (rate: number) => {
+    setRating(rate);
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-lg">
+      <h2 className="text-lg mb-4">Please rate your experience</h2>
+      <div className="flex mb-4">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <button
+            key={star}
+            className={`text-2xl ${star <= (rating || 0) ? 'text-yellow-500' : 'text-gray-400'}`}
+            onClick={() => handleRating(star)}
+          >
+            ★
+          </button>
+        ))}
+      </div>
+      <button
+        className="bg-blue-500 text-white px-4 py-2 rounded-md"
+        onClick={onClose}
+      >
+        Submit
+      </button>
+    </div>
+  );
+};
+
+export default FeedbackForm;

nepalingo-web/src/components/QuizComponent.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import ExitModal from './ExitModal';
+
+const QuizComponent: React.FC = () => {
+  const [showExitModal, setShowExitModal] = useState(false);
+
+  const handleExitClick = () => {
+    setShowExitModal(true);
+  };
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl mb-4">Quiz Section</h1>
+      {/* Quiz content here */}
+      <button
+        className="bg-red-500 text-white px-4 py-2 rounded-md"
+        onClick={handleExitClick}
+      >
+        Exit
+      </button>
+      {showExitModal && <ExitModal onClose={() => setShowExitModal(false)} />}
+    </div>
+  );
+};
+
+export default QuizComponent;