Refactored MemberCard so that flippable functionality is optional and can be set manually. Also improved styling.

Author: arthurs347

src/components/MemberCard.css

@@ -4,6 +4,12 @@
   height: 316px;
 }
 
+.regCard {
+    background-color: transparent;
+    width: 240px;
+    height: 316px;
+}
+
 .flipCardInner {
   position: relative;
   width: 100%;
@@ -27,7 +33,7 @@
 
 .flipCardFront {
   color: rgb(0, 0, 0);
-  
+
   ;
 }
 

src/components/MemberCard.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import LocalCafeIcon from "@mui/icons-material/LocalCafe";
 import './MemberCard.css'; // Import the regular CSS file
 
+const FLIPPABLE = false; // Set to true to enable flip card functionality
+
 interface MemberCardProps {
   imagePath: string;
   name: string;
@@ -11,9 +13,9 @@ interface MemberCardProps {
 }
 
 const MemberCard: React.FC<MemberCardProps> = ({ imagePath, name, title, url, backContent }) => {
-  return (
-    <div className="flex-col h-90 w-60 shadow-lg overflow-hidden m-3">
-      <div className="flipCard">
+    return (
+    <div className="flex-col h-90 w-60 shadow-lg overflow-hidden m-3 hover:shadow-lg hover:-translate-y-3 duration-300 z-2 hover:cursor-pointer rounded-md">
+      <div className={FLIPPABLE ? "flipCard" : "regCard"}>
         <div className="flipCardInner">
           <div className="flipCardFront">
             <img className="image h-60 w-full object-cover p-3" src={imagePath} alt={name} />
@@ -29,9 +31,9 @@ const MemberCard: React.FC<MemberCardProps> = ({ imagePath, name, title, url, ba
               </div>
             </div>
           </div>
-          <div className="flipCardBack">
-            <p>{backContent}</p>
-          </div>
+            <div className="flipCardBack">
+                <p>{backContent}</p>
+            </div>
         </div>
       </div>
     </div>