wenhans genius fix for card included

hicsail · Dec 13, 2023 · 277ec89 · 277ec89
1 parent c0013c2
commit 277ec89
Showing 1 changed file with 10 additions and 31 deletions.
diff --git a/src/components/ResourceCard.tsx b/src/components/ResourceCard.tsx
@@ -21,42 +21,21 @@ const ResourceCard = ({
   color,
 }: ResourceCardProps) => {
   return (
-    <IonCard color="tertiary">
-      <div style={{ height: 120 }}>
-        <img
-          src={image}
-          alt="CYCM Circle"
-          className="mx-auto mt-6"
-          width={250}
-        />
-      </div>
+    <IonCard color="tertiary" className="flex flex-col justify-between">
+      <img src={image} alt="CYCM Circle" className="mx-auto mt-6" width={250} />
       <IonCardHeader className="text-center">
         <IonCardTitle className="text-2xl">{title}</IonCardTitle>
       </IonCardHeader>
-      <IonCardContent className="text-center">
-        <div style={{ height: 100 }}>
-          <p className="text-md font-sans h-12">{description}</p>
-        </div>
+      <IonCardContent className="text-center flex-grow">
+        <p className="text-md font-sans">{description}</p>
       </IonCardContent>
-      <div
-        className="relative"
-        style={{ width: "100%", textAlign: "center", height: 100 }}
-      >
-        <div
-          style={{
-            position: "absolute",
-            bottom: 20,
-            left: "50%",
-            transform: "translateX(-50%)",
-          }}
+      <div className="text-center mb-4">
+        <button
+          type="button"
+          className="text-gray-900 hover:text-white bg-gray-200 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-md text-md px-5 py-2 text-center my-2"
         >
-          <button
-            type="button"
-            className="text-gray-900 hover:text-white bg-gray-200 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-md text-md px-5 py-2 text-center my-2"
-          >
-            {action.text}
-          </button>
-        </div>
+          {action.text}
+        </button>
       </div>
     </IonCard>
   );