changed the component name, added an overlay and converted few styles…

… into tailwind
nepalcodes · Jul 19, 2024 · 9249942 · 9249942
1 parent 62ad480
commit 9249942
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/nepalingo-web/src/components/DailyQuiz.tsx → ...lingo-web/src/components/ActivityCard.tsx b/nepalingo-web/src/components/DailyQuiz.tsx → ...lingo-web/src/components/ActivityCard.tsx
@@ -2,14 +2,14 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import Button from "./Button";
 
-interface DailyQuizProps {
+interface ActivityCardProps {
   backgroundImageUrl: string;
   quizYourselfText: string;
   descriptionText: string;
   buttonText: string;
 }
 
-const DailyQuiz: React.FC<DailyQuizProps> = ({
+const ActivityCard: React.FC<ActivityCardProps> = ({
   backgroundImageUrl,
   quizYourselfText,
   descriptionText,
@@ -22,18 +22,16 @@ const DailyQuiz: React.FC<DailyQuizProps> = ({
   };
 
   return (
-    <div
-      className="daily-quiz-card bg-cover text-white p-8 rounded-lg flex flex-col justify-end"
-      style={{
-        backgroundImage: `url(${backgroundImageUrl})`,
-        borderRadius: "0.5rem",
-        height: "220px", // Reduced height
-        paddingBottom: "20px", // Space at the bottom
-      }}
-    >
-      <div>
-        <p className="text-lg font-bold mb-1">{quizYourselfText}</p> {/* Reduced margin-bottom */}
-        <p className="text-sm opacity-80 mb-1">{descriptionText}</p> {/* Reduced margin-bottom */}
+    <div className="relative daily-quiz-card text-white p-8 rounded-lg flex flex-col justify-end h-[220px] pb-5 overflow-hidden">
+      <img
+        src={backgroundImageUrl}
+        alt="Background"
+        className="absolute inset-0 w-full h-full object-cover"
+      />
+      <div className="absolute inset-0 bg-black/80" />
+      <div className="relative z-10">
+        <p className="text-lg font-bold mb-1">{quizYourselfText}</p>
+        <p className="text-sm opacity-80 mb-1">{descriptionText}</p>
         <Button
           className="bg-red-600 text-white font-bold py-2 px-4 rounded"
           onClick={handleStartQuizClick}
@@ -45,4 +43,5 @@ const DailyQuiz: React.FC<DailyQuizProps> = ({
   );
 };
 
-export default DailyQuiz;
+export default ActivityCard;
+
diff --git a/nepalingo-web/src/pages/Home.tsx b/nepalingo-web/src/pages/Home.tsx
@@ -4,8 +4,9 @@ import ReactGA from "react-ga4";
 import { useAuth } from "@/hooks/Auth";
 import Header from "@/components/header/Header";
 import GreetingCard from "@/components/GreetingCard";
-import DailyQuiz from "@/components/DailyQuiz";
+import DailyQuiz from "@/components/ActivityCard";
 import ViewDictionary from "@/components/ViewDictionary";
+import ActivityCard from "@/components/ActivityCard";
 
 const Home: React.FC = () => {
   ReactGA.send({
@@ -43,8 +44,8 @@ const Home: React.FC = () => {
           </div>
         </div>
         <div className="mb-5 pt-5">
-          <DailyQuiz 
-            backgroundImageUrl="https://t3.ftcdn.net/jpg/00/73/08/22/360_F_73082224_ay4Tus31QNHNmGSIty53ZE6mBrBc47cV.jpg"
+          <ActivityCard 
+            backgroundImageUrl="https://t4.ftcdn.net/jpg/06/28/27/29/360_F_628272989_krphWxzqARpTZ20wOBU0YeH2Ecf7iCtI.jpg"
             quizYourselfText="QUIZ YOURSELF"
             descriptionText=" Taking Quiz is a better and fun way for learning"
             buttonText="Start Quiz"