Created a search bar that calls the useDictionary function

README.md

@@ -119,7 +119,7 @@ The contributors of this project are participants of Incubate Nepal.
             <img src="README-photos/devakirawal.jpeg" alt="Image of Devaki Rawal"/>
         </td>
         <td>
-           Devaki Rawal is a high school graduate and a tech enthusiast, always eager to spread digital literacy. In her free time, she loves teaching children. She challenges herself every day to become one step better than yesterday. Devaki enjoys traveling, watching Shark Tank, and teaching. She is always open to learning and exploring new things every day.
+           Devaki Rawal is a high school graduate and a tech enthusiast, always eager to spread digital literacy programs. In her free time, she loves teaching children. She challenges herself every day to become one step better than yesterday. Devaki enjoys traveling, watching Shark Tank, and teaching. She is always open to learning and exploring new things every day.
         </td>
     </tr>
 </table>

nepalingo-web/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@supabase/supabase-js": "^2.44.2",

nepalingo-web/public/quotes/newari.csv

@@ -1,6 +1,6 @@
-nepalbhasa, english
-"𑐮𑐸𑑃 𑐮𑐣𑐾𑐐𑐸 𑐟𑑅𑐎𑑅, 𑐩𑐣𑐹 𑐮𑐣𑐾𑐐𑐸 𑐕𑐎𑑅 𑑋", "Gold may be weighed many times, a man weighed but once.(www.nepal-lipi.com)"
-"𑐟𑑅𑐡𑐾𑐰𑐵𑐫𑐵 𑐎𑑂𑐰𑐫𑑂 𑐩𑐟𑑃 𑐩𑐏𑑃 𑑋", "Dark under the lamp.(www.nepal-lipi.com)"
-"𑐘𑐶𑐩𑑂𑐴 𑐟𑐶𑐥𑐹 𑐮𑑂𑐰𑐵𑐂, 𑐩𑐵𑐎𑐮𑑃 𑐦𑑃𑐳𑐶 𑐏𑐵𑐂 𑑋", "While the couple quarrels the monkey picks up the fruit.(www.nepal-lipi.com)"
-"𑐮𑐸𑐦𑐶𑑃 𑐴𑐵𑐫𑐾𑐰𑑃 𑐩𑐵𑑃 𑐮𑐸𑐩𑑃 𑑋", "When you stumble, you remember your mother.(www.nepal-lipi.com)"
-"𑐩𑐶𑐳𑐵𑐫𑐵 𑐟𑐶𑐳𑐵, 𑐧𑐬𑐾𑐖𑐸𑐫𑐵 𑐣𑐳𑐵 𑑋", "A woman’s ornament is food for the goldsmith. (www.nepal-lipi.com)"
+nepalbhasa, english
+"𑐮𑐸𑑃 𑐮𑐣𑐾𑐐𑐸 𑐟𑑅𑐎𑑅, 𑐩𑐣𑐹 𑐮𑐣𑐾𑐐𑐸 𑐕𑐎𑑅 𑑋", "Gold may be weighed many times, a man weighed but once.(www.nepal-lipi.com)"
+"𑐟𑑅𑐡𑐾𑐰𑐵𑐫𑐵 𑐎𑑂𑐰𑐫𑑂 𑐩𑐟𑑃 𑐩𑐏𑑃 𑑋", "Dark under the lamp.(www.nepal-lipi.com)"
+"𑐘𑐶𑐩𑑂𑐴 𑐟𑐶𑐥𑐹 𑐮𑑂𑐰𑐵𑐂, 𑐩𑐵𑐎𑐮𑑃 𑐦𑑃𑐳𑐶 𑐏𑐵𑐂 𑑋", "While the couple quarrels the monkey picks up the fruit.(www.nepal-lipi.com)"
+"𑐮𑐸𑐦𑐶𑑃 𑐴𑐵𑐫𑐾𑐰𑑃 𑐩𑐵𑑃 𑐮𑐸𑐩𑑃 𑑋", "When you stumble, you remember your mother.(www.nepal-lipi.com)"
+"𑐩𑐶𑐳𑐵𑐫𑐵 𑐟𑐶𑐳𑐵, 𑐧𑐬𑐾𑐖𑐸𑐫𑐵 𑐣𑐳𑐵 𑑋", "A woman’s ornament is food for the goldsmith. (www.nepal-lipi.com)"

nepalingo-web/src/App.tsx

@@ -7,6 +7,7 @@ import {
 } from "react-router-dom";
 import User_auth from "./components/userAuth/UserAuth";
 import Home from "./pages/Home/Home";
+import SearchBarPage from "./pages/SearchBarPage";
 import FlashcardPage from "./pages/FlashcardPage";
 import { useAuth } from "./components/userAuth/AuthContext";
 import ReactGA from "react-ga4";
@@ -20,14 +21,16 @@ const App: React.FC = () => {
     <Router>
       <Routes>
         <Route path="/login" element={<User_auth />} />
+        {/* Protect the / route, redirect to /login if not authenticated */}
+        <Route path="/" element={user ? <Home /> : <Navigate to="/login" />} />
         <Route
           path="/flashcard"
           element={user ? <FlashcardPage /> : <Navigate to="/login" />}
         />
-        {/* Protect the / route, redirect to /login if not authenticated */}
-        <Route path="/" element={user ? <Home /> : <Navigate to="/login" />} />
-        {/* Default route redirects to /login */}
-        <Route path="/" element={<Navigate to="/login" />} />
+        <Route 
+          path="/dictionary" 
+          element={ user ? <SearchBarPage /> : <Navigate to="/login" />} 
+        />
       </Routes>
     </Router>
   );

nepalingo-web/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import useDictionary, { DictionaryProps} from '../../hooks/useDictionary';
+
+interface DictionarySearchBarProps {
+  language: DictionaryProps['language']; // Define language as a prop
+}
+
+const DictionarySearchBar: React.FC<DictionarySearchBarProps> = ({ language }) => {
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const { data, isLoading, error } = useDictionary({ language, word: searchTerm });
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const handleSearchClick = () => {
+    // Trigger re-fetch (not necessary for useSWR as it auto-updates)
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSearchClick();
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center mt-5">
+      <div className="w-3/4 flex items-center relative">
+        <input
+          type="text"
+          value={searchTerm}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder="Search here"
+          className="w-full p-2 pl-5 border border-gray-300 rounded-md text-lg shadow-sm transition-colors duration-300 focus:border-blue-500 focus:shadow-lg bg-white"
+        />
+        <span
+          className="absolute right-2 text-lg text-gray-600 cursor-pointer"
+          onClick={handleSearchClick}
+        >
+          <FontAwesomeIcon icon={faSearch} />
+        </span>
+      </div>
+
+      {error && <p className="mt-2 text-red-600">{error.message}</p>}
+      <ul className="list-none p-0 mt-5 w-3/4">
+  {isLoading && <p className="mt-2 text-gray-600">Loading...</p>}
+  {data && data.meanings ? (
+    data.meanings.length > 0 ? (
+      data.meanings.map((meaning) => (
+        <li key={meaning.meaningOriginal} className="bg-gray-100 p-4 mb-2 rounded-md shadow transition-all duration-300 hover:bg-gray-200">
+          <h2 className="m-0 mb-2 text-xl text-gray-900">{data.word}</h2>
+          <p className="my-1 text-sm text-gray-700">{meaning.meaningEn}</p>
+          {meaning.meaningNp && <p className="my-1 text-sm text-gray-700">{meaning.meaningNp}</p>}
+          {meaning.meaningOriginal && <p className="my-1 text-sm text-gray-700">{meaning.meaningOriginal}</p>}
+          {meaning.audio && <audio controls src={meaning.audio.uri}></audio>}
+          {meaning.image && <img src={meaning.image.uri} alt={data.word} />}
+        </li>
+      ))
+    ) : (
+      <p className="mt-2 text-gray-600">No results found</p>
+    )
+  ) : (
+    <p className="mt-2 text-gray-600">No results available</p>
+  )}
+</ul>
+
+
+
+    </div>
+  );
+};
+
+export default DictionarySearchBar;

nepalingo-web/src/hooks/useDictionary.tsx

@@ -28,18 +28,18 @@ const useDictionary = ({ language, ...otherProps }: DictionaryProps) => {
             return useNewari(otherProps)
         // case 'tajpuriya':
         //     return ({
-        //         error: { message: "Sorry the language doesnot exists" },
+        //         error: { message: "Sorry the language does not exist" },
         //         data: null,
         //         isLoading: false,
         //     })
         default:
             return ({
-                error: { message: "Sorry the language doesnot exists" },
+                error: { message: "Sorry the language does not exist" },
                 data: undefined,
                 isLoading: false,
             })
     }
 }
 
-
 export default useDictionary
+

nepalingo-web/src/hooks/useNewari.tsx

@@ -38,4 +38,4 @@ const useNewari = (props: Omit<DictionaryProps, 'language'>) => {
     return { data: response, error:customError, isLoading }
 }
 
-export default useNewari;
+export default useNewari;

nepalingo-web/src/pages/Home/Home.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from 'react-router-dom';
 import logo from "../../assets/logo.png";
 import Header from "../../components/header/Header";
 import ReactGA from "react-ga4";
@@ -44,9 +45,17 @@ const Home: React.FC = () => {
                     <DailyQuiz />
                 </div>
 
+                <div className="mb-10">
+                  <Link
+                    to="/dictionary"
+                    className="text-xl font-bold p-5 border-2 border-white rounded-full"
+                  >
+                  Search Bar
+                  </Link>
+                </div>
+
             </div>
         </div>
-    );
-};
+  )};
 
 export default Home;

nepalingo-web/src/pages/SearchBarPage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from '../components/header/Header'; 
+import DictionarySearchBar from '../components/SearchBar/SearchBar';
+
+const SearchBarPage: React.FC = () => {
+  return (
+    <>
+      <Header />  
+      <h1 className="text-center text-4xl mt-4">Search Dictionary</h1>  
+      <DictionarySearchBar language="newari"/>
+    </>
+  );
+}
+
+export default SearchBarPage;