Merge branch 'main' into greeting-components

README.md

@@ -116,10 +116,10 @@ The contributors of this project are participants of Incubate Nepal.
 <table>
     <tr>
         <td width=150>
-            <img src="README-photos/devakirawal.jpeg" alt="Image of Aditya Bikram Thakur"/>
+            <img src="README-photos/devakirawal.jpeg" alt="Image of Devaki Rawal"/>
         </td>
         <td>
-            Devaki Rawal is in Kathmandu, living in Bhaktapur, and currently in her gap year. She knows frontend development and UI/UX design from her experience working on a Buddhist lipi to English translation app for tourists. In her free time she enjoys watching Shark Tank, listening to music, and singing.
+           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/dictionaries/Tajpuriya grammer - Sheet1.csv

@@ -0,0 +1,41 @@
+English,Tajpuriya
+Go,जा 
+Come,ओस 
+Sit,बोठ 
+Rice,खराक 
+play,खेल्लुवा 
+I,मुई 
+You,तोर 
+My,मोर
+We,हमा
+Our,हमार
+All,गोट्टेला 
+yesterday,कल 
+Today,आज 
+Tomorrow,कालीगे 
+where,कुना 
+mummy,आई 
+Baba,बाउ 
+Grandfather,दादो
+Gradndmother,दादी
+Brother,भाई
+Sister,बहिन
+When,
+How,किनङ्गे 
+Why,काए 
+Way,रस्ता 
+Here,हितीना 
+What,काए
+Water,जल 
+Look,देख
+And,आर
+People,लोग 
+Over,उपर 
+Know,पत्ता 
+Like this,हिनङ्गे
+This,ईला 
+Did,करेसोक 
+House,घरत 
+Infront,आगुबिती
+Behind,पाछुबिती
+His/Her,वाँर 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   BrowserRouter as Router,
   Route,
@@ -7,7 +7,8 @@ import {
 } from "react-router-dom";
 import User_auth from "./components/userAuth/UserAuth";
 import Home from "./pages/Home/Home";
-import FlashcardPage from "./pages/FlashcardPage"
+import SearchBarPage from "./pages/SearchBarPage";
+import FlashcardPage from "./pages/FlashcardPage";
 import { useAuth } from "./components/userAuth/AuthContext";
 import ReactGA from "react-ga4";
 
@@ -22,11 +23,16 @@ const App: React.FC = () => {
     <Router>
       <Routes>
         <Route path="/login" element={<User_auth />} />
-        <Route path="/learn" element={<FlashcardPage />} />
         {/* 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="/flashcard"
+          element={user ? <FlashcardPage /> : <Navigate to="/login" />}
+        />
+        <Route 
+          path="/dictionary" 
+          element={ user ? <SearchBarPage /> : <Navigate to="/login" />} 
+        />
       </Routes>
     </Router>
   );

nepalingo-web/src/components/DailyQuiz.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
+import Button from './Button';
+const DailyQuiz: React.FC = () => {
+  const backgroundImageUrl = 'https://t3.ftcdn.net/jpg/00/73/08/22/360_F_73082224_ay4Tus31QNHNmGSIty53ZE6mBrBc47cV.jpg'; // Set your image URL
+  const navigate = useNavigate(); // Get the navigate function
+
+  const handleStartQuizClick = () => {
+    // Redirect to /flashcard when the button is clicked
+    navigate('/flashcard');
+  };
+
+  return (
+    <div
+      className="daily-quiz-card bg-cover text-white p-8 rounded-lg"
+      style={{ backgroundImage: `url(${backgroundImageUrl})` }}
+    >
+      <h1 className="mb-2">Nepalingo</h1>
+      <p className="text-lg font-bold mb-2">QUIZ YOURSELF</p>
+      <p className="text-sm opacity-80 mb-2">
+        Taking Quiz is a better and fun way for learning
+      </p>
+      <Button
+        className="bg-slate-800"
+        onClick={handleStartQuizClick} // Call the function on button click
+      >
+        Start Quiz
+      </Button>
+    </div>
+  );
+};
+
+export default DailyQuiz;

nepalingo-web/src/components/Flashcard.tsx

@@ -1,61 +1,75 @@
-import React, { useState } from 'react';
-import Card from './Card';
-import Button from './Button';
-import useDictionary from '../hooks/useDictionary';
+import React, { useState } from "react";
+import Card from "./Card";
+import Button from "./Button";
+import useDictionary from "../hooks/useDictionary";
 import { generate } from "random-words";
+import ReactGA from "react-ga4";
 
 const Flashcard: React.FC = () => {
+  ReactGA.event({
+    category: "flash cards",
+    action: "Click",
+    value: 99, // optional, must be a number
+    nonInteraction: true, // optional, true/false
+    transport: "xhr", // optional, beacon/xhr/image
+  });
+  const [word, setWord] = useState("salt");
+  const [isFlipped, setIsFlipped] = useState(false);
+  const { data, isLoading, error } = useDictionary({
+    language: "newari",
+    word,
+  });
+  console.log(error);
 
+  const handleFlip = () => {
+    setIsFlipped(!isFlipped);
+  };
 
-    const [word, setWord] = useState('salt');
-    const [isFlipped, setIsFlipped] = useState(false);
-    const { data, isLoading, error } = useDictionary({ language: 'newari', word });
-    console.log(error)
+  const handleNextWord = () => {
+    setWord(generate() as string);
+    setIsFlipped(false);
+  };
 
+  if (isLoading) return <div>Loading</div>;
+  if (error?.response?.length) handleNextWord();
+  const meaning = data && data.meanings[0];
 
-    const handleFlip = () => {
-        setIsFlipped(!isFlipped);
-    };
+  return (
+    <div className="max-w-md mx-auto p-4 flex justify-center border-2">
+      <div className="mx-auto max-w-[calc(100% - 20px)]">
+        {error ? (
+          <div>Error: {error.message}</div>
+        ) : (
+          <Card
+            Word={word}
+            TranslatedWord={meaning?.meaningOriginal || ""}
+            DevenagiriSpelling={meaning?.meaningNp || ""}
+            Pronunciation={meaning?.meaningOriginal || ""}
+            ImageUrl={meaning?.image?.uri || ""}
+            PronounciationUrl={meaning?.audio?.uri}
+            isFlipped={isFlipped}
+          />
+        )}
 
-    const handleNextWord = () => {
-        setWord(generate() as string)
-        setIsFlipped(false);
-    };
-
-
-
-    if (isLoading) return <div>Loading</div>
-    if (error?.response?.length) handleNextWord()
-    const meaning = data && data.meanings[0]
-
-
-    return (
-        <div className="max-w-md mx-auto p-4 flex justify-center border-2">
-            <div className="mx-auto max-w-[calc(100% - 20px)]">
-                {
-                    error ? <div>Error: {error.message}</div> : <Card
-                        Word={word}
-                        TranslatedWord={meaning?.meaningOriginal || ''}
-                        DevenagiriSpelling={meaning?.meaningNp || ''}
-                        Pronunciation={meaning?.meaningOriginal || ''}
-                        ImageUrl={meaning?.image?.uri || ''}
-                        PronounciationUrl={meaning?.audio?.uri}
-                        isFlipped={isFlipped}
-                    />
-                }
-
-
-                <div className="flex justify-between mt-4">
-                    <Button disabled={isLoading} className="bg-purple-800" onClick={handleFlip}>
-                        Flip
-                    </Button>
-                    <Button disabled={isLoading} className="bg-gray-500" onClick={handleNextWord}>
-                        Next Word
-                    </Button>
-                </div>
-            </div>
+        <div className="flex justify-between mt-4">
+          <Button
+            disabled={isLoading}
+            className="bg-purple-800"
+            onClick={handleFlip}
+          >
+            Flip
+          </Button>
+          <Button
+            disabled={isLoading}
+            className="bg-gray-500"
+            onClick={handleNextWord}
+          >
+            Next Word
+          </Button>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default Flashcard;

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;