Using Card component with some modifications

WildMeOrg · Nov 19, 2024 · 52b572b · 52b572b
1 parent 5b69043
commit 52b572b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 45 deletions.
diff --git a/frontend/src/components/Card.jsx b/frontend/src/components/Card.jsx
@@ -8,35 +8,49 @@ export default function Card({
   content = "",
   buttonText = "",
   link = "",
+  color = "black",
 }) {
   const themeColor = useContext(ThemeColorContext);
   return (
     <div
-      className="d-flex flex-column align-items-center justify-content-center p-4 m-4 "
+      className="d-flex flex-column align-items-center bg-white p-3 m-3 fw-semibold"
+      onClick={() => (window.location.href = link)}
       style={{
-        minWidth: "15rem",
-        maxWidth: "20rem",
-        borderRadius: "25px",
+        height: "170px",
+        width: "170px",
+        borderRadius: "20px",
         boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
+        color: color,
+        cursor: "pointer",
       }}
     >
       {icon}
-      <div className="d-flex flex-column align-items-center justify-content-center ">
-        <h5>{title}</h5>
-        <p>{content}</p>
+      {title && (
+        <span
+          className="text-center"
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            maxWidth: "100%",
+          }}
+          title={title}
+        >
+          {title}
+        </span>
+      )}
+      {content && <p>{content}</p>}
+      {buttonText && (
         <div>
-          {buttonText && (
-            <MainButton
-              link={link}
-              color="white"
-              backgroundColor={themeColor?.wildMeColors?.cyan700}
-              borderColor="#007bff"
-            >
-              {buttonText}
-            </MainButton>
-          )}
+          <MainButton
+            link={link}
+            color="white"
+            backgroundColor={themeColor?.wildMeColors?.cyan700}
+            borderColor="#007bff"
+          >
+            {buttonText}
+          </MainButton>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/pages/AdminLogs.jsx b/frontend/src/pages/AdminLogs.jsx
@@ -6,6 +6,7 @@ import PassKey from "../components/svg/PassKey";
 import GalleryThumbnail from "../components/svg/GalleryThumbnail";
 import DeleteSweep from "../components/svg/DeleteSweep";
 import StackedEmail from "../components/svg/StackedEmail";
+import Card from "../components/Card";
 
 export const AdminLogs = () => {
   const themeColor = useContext(ThemeColorContext);
@@ -36,7 +37,6 @@ export const AdminLogs = () => {
   return (
     <div
       style={{
-        // eslint-disable-next-line no-undef
         backgroundImage: `url(${process.env.PUBLIC_URL}/images/List_of_Logs_Image.png)`,
         backgroundSize: "cover",
         backgroundPosition: "center",
@@ -58,33 +58,13 @@ export const AdminLogs = () => {
         <h1 className="display-1 text-white fw-bold">Logs</h1>
         <Row>
           {cards.map((card, index) => (
-            <div
+            <Card
               key={index}
-              className="bg-white d-flex flex-column align-items-center p-3 m-3 fw-semibold"
-              onClick={() => (window.location.href = card.url)}
-              style={{
-                height: "170px",
-                width: "170px",
-                color: themeColor.primaryColors.primary800,
-                borderRadius: "20px",
-                cursor: "pointer",
-              }}
-            >
-              <div className="d-flex align-items-center justify-content-center mt-2">
-                {card.icon}
-              </div>
-              <span
-                className="text-center"
-                style={{
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  maxWidth: "100%",
-                }}
-                title={card.title}
-              >
-                {card.title}
-              </span>
-            </div>
+              icon={card.icon}
+              title={card.title}
+              link={card.url}
+              color={themeColor.primaryColors.primary800}
+            />
           ))}
         </Row>
       </div>