Added description in details/summary in Card.jsx

chrisnajman · Apr 18, 2024 · a645c83 · a645c83
1 parent a33fd0f
commit a645c83
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -7,6 +7,7 @@ function Card({ card }) {
   } else if (card.location === "Online") {
     badgeText = "ONLINE"
   }
+
   return (
     <li className="card">
       <div className="image">
@@ -63,6 +64,15 @@ function Card({ card }) {
           </span>
         </div>
       </div>
+      {card.description && (
+        <details
+          id="description"
+          className="description"
+        >
+          <summary aria-controls="#description">Description</summary>
+          <p>{card.description}</p>
+        </details>
+      )}
     </li>
   )
 }
@@ -80,6 +90,7 @@ Card.propTypes = {
     title: PropTypes.string,
     price: PropTypes.number,
     unit: PropTypes.string,
+    description: PropTypes.string,
   }),
 }
 

diff --git a/src/index.css b/src/index.css
@@ -131,10 +131,18 @@ img {
     gap: 0.5rem;
   }
 
-  .title {
+  & .title {
     font-weight: 400;
     font-size: 1.2rem;
   }
+
+  & .description {
+    max-width: 17.6rem;
+    & summary {
+      cursor: pointer;
+      font-weight: 600;
+    }
+  }
 }
 
 .page-footer {