Merge pull request #118 from nepalcodes/week_4

Worked on the daily quiz

nepalingo-web/src/App.tsx

@@ -20,7 +20,7 @@ const App: React.FC = () => {
     <Router>
       <Routes>
         <Route path="/login" element={<User_auth />} />
-        <Route path="/learn" element={<FlashcardPage />} />
+        <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 */}

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/pages/Home/Home.tsx

@@ -1,9 +1,9 @@
 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";
 import { useAuth } from "../../components/userAuth/AuthContext";
+import DailyQuiz from "../../components/DailyQuiz";
 
 const Home: React.FC = () => {
   ReactGA.send({
@@ -41,12 +41,7 @@ const Home: React.FC = () => {
         </div>
       </div>
       <div className="mb-10">
-        <Link
-          to="/learn"
-          className="text-xl font-bold p-5 border-2 border-white rounded-full"
-        >
-          Learn Words
-        </Link>
+        <DailyQuiz />
       </div>
     </div>
   );