used aspect-ratio and flex-1 to make the activity card responsive and…

… updated a lint error
nepalcodes · Jul 20, 2024 · ecf2ce4 · ecf2ce4
1 parent b53129a
commit ecf2ce4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/nepalingo-web/src/components/ActivityCard.tsx b/nepalingo-web/src/components/ActivityCard.tsx
@@ -22,16 +22,18 @@ const ActivityCard: React.FC<ActivityCardProps> = ({
   };
 
   return (
-    <div className="flex-1 relative daily-quiz-card text-white p-4 sm:p-6 md:p-8 rounded-lg flex flex-col justify-end h-[180px] sm:h-[200px] md:h-[220px] pb-5 overflow-hidden">
+    <div className="flex-1 aspect-w-16 aspect-h-9 relative daily-quiz-card text-white p-4 sm:p-6 md:p-8 rounded-lg flex flex-col justify-end 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-base sm:text-lg font-bold mb-1">{quizYourselfText}</p>
-        <p className="text-xs sm:text-sm opacity-80 mb-1">{descriptionText}</p>
+      <div className="relative z-10 flex flex-col justify-between h-full">
+        <div className="flex-1 flex flex-col justify-end">
+          <p className="text-base sm:text-lg font-bold mb-1">{quizYourselfText}</p>
+          <p className="text-xs sm:text-sm opacity-80 mb-1">{descriptionText}</p>
+        </div>
         <Button
           className="bg-red-600 text-white font-bold py-1 px-3 sm:py-2 sm:px-5 md:py-3 md:px-6 rounded text-xs sm:text-sm md:text-base"
           onClick={handleStartQuizClick}

diff --git a/nepalingo-web/src/pages/Home.tsx b/nepalingo-web/src/pages/Home.tsx
@@ -4,7 +4,6 @@ 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/ActivityCard";
 import ViewDictionary from "@/components/ViewDictionary";
 import ActivityCard from "@/components/ActivityCard";
 

diff --git a/nepalingo-web/tailwind.config.ts b/nepalingo-web/tailwind.config.ts
@@ -17,7 +17,9 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ],
 };
 
 export default config;