Add chapters

nepalingo-web/src/App.tsx

@@ -10,6 +10,7 @@ import ReactGA from "react-ga4";
 import { PrivateRoutes } from "@/components/PrivateRoutes";
 import About from "@/pages/About";
 import Credits from "@/pages/Credits";
+import Chapters from "@/pages/Chapters";
 import Quiz from "@/pages/Quiz";
 import SignUp from "./pages/SignUp";
 
@@ -31,7 +32,8 @@ const App: React.FC = () => {
             <Route path="/" element={<Home />} />
             <Route path="/flashcard" element={<FlashcardPage />} />
             <Route path="/dictionary" element={<DictionaryPage />} />
-            <Route path="/quiz" element={<Quiz />} />
+            <Route path="/quiz/:chapter" element={<Quiz />} />
+            <Route path="/chapters" element={<Chapters />} />
           </Route>
         </Routes>
       </Router>

nepalingo-web/src/components/Flashcard.tsx

@@ -29,7 +29,10 @@ const Flashcard: React.FC = () => {
   useEffect(() => {
     // Initialize the word generator when the language changes
     const initWordGenerator = async () => {
-      const generator = await getNextWord(selectedLanguage || "Newari");
+      const generator = await getNextWord(
+        selectedLanguage || "Newari",
+        undefined,
+      );
       setWordGenerator(generator);
       handleNextWord(generator);
     };

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

@@ -47,10 +47,10 @@ const ChangeLanguage: React.FC = () => {
     value: Languages[key as LanguageKey],
   }));
   return (
-    <div ref={dropdownRef} className="relative text-left h-full">
+    <div ref={dropdownRef} className="relative text-left">
       <button
         type="button"
-        className="w-48 bg-grayDark px-4 h-10 rounded-lg text-sm font-medium text-gray-900 focus:outline-none flex justify-between items-center"
+        className="w-32 bg-grayDark px-4 h-10 rounded-lg text-sm font-medium text-gray-900 focus:outline-none flex justify-between items-center"
         onClick={toggleMenu}
       >
         <span className="text-white font-primary font-black">

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

@@ -17,31 +17,48 @@ const Header: React.FC = () => {
   };
 
   return (
-    <nav className=" border-gray-200  py-1 bg-black text-white flex gap-4 justify-between items-center w-full h-16">
-      <div>
-        <Link to={"/"}>
-          <img src={logo} alt="Nepalingo Logo" className="h-12" />
-        </Link>
+    <>
+      <nav className="border-gray-200 py-1 bg-black text-white flex gap-2 justify-between items-center w-full h-16">
+        <div>
+          <Link to={"/"}>
+            <img src={logo} alt="Nepalingo Logo" className="max-h-12" />
+          </Link>
+        </div>
+        <button
+          onClick={handleOpenFeedbackForm}
+          className="hover:underline hidden md:block"
+        >
+          Give us Feedback!
+        </button>
+        <a href="/about" className="hover:underline hidden md:block">
+          About
+        </a>
+        <a href="/credits" className="hover:underline hidden md:block">
+          Credits
+        </a>
+        <div className="flex-1"></div>
+        <ChangeLanguage />
+        <UserProfile />
+      </nav>
+
+      <div className="md:hidden flex gap-4 justify-center text-white">
+        <button onClick={handleOpenFeedbackForm} className="hover:underline">
+          Give us Feedback!
+        </button>
+        <a href="/about" className="hover:underline">
+          About
+        </a>
+        <a href="/credits" className="hover:underline">
+          Credits
+        </a>
       </div>
-      <button onClick={handleOpenFeedbackForm} className="hover:underline">
-        Give us Feedback!
-      </button>
 
       {isFeedbackFormOpen && (
         <div className="z-20 fixed inset-0 bg-white-800 bg-opacity-50 flex justify-center items-center">
           <FeedbackForm onClose={handleCloseFeedbackForm} />
         </div>
       )}
-      <a href="/about" className="text-white hover:underline">
-        About
-      </a>
-      <a href="/credits" className="text-white hover:underline">
-        Credits
-      </a>
-      <div className="flex-1"></div>
-      <ChangeLanguage />
-      <UserProfile />
-    </nav>
+    </>
   );
 };