cards

Author: chriscoyier

src/components/card/card.jsx

@@ -2,7 +2,10 @@ import styles from "./card.module.scss";
 
 const Card = (props) => {
   return (
-    <div className={`${styles.root} ${props.extraClasses}`}>
+    <div
+      className={`${styles.root} ${props.extraClasses} card`}
+      data-tags={props.tags?.map((tag) => tag)}
+    >
       {props.logo && (
         <a href={props.link} className={styles.logoHeader}>
           <img
@@ -35,15 +38,16 @@ const Card = (props) => {
               <img src="/images/topic.svg" alt="" />
               Topics
             </span>
-            {props.tags.map((tag) => (
-              <button
-                className={styles.topic}
-                key={tag}
-                onClick={() => props.tagChanger(tag)}
-              >
-                {tag}
-              </button>
-            ))}
+            <div className="card-tags">
+              {props.tags.map((tag) => (
+                <button
+                  className={styles.topic}
+                  onClick={() => props.tagChanger(tag)}
+                >
+                  {tag}
+                </button>
+              ))}
+            </div>
           </div>
         )}
         {props.topics && (
@@ -52,11 +56,13 @@ const Card = (props) => {
               <img src="/images/focus.svg" alt="" />
               Focus Areas
             </span>
-            {props.topics.map((topic) => (
-              <span key={topic} className={styles.topic}>
-                {topic}
-              </span>
-            ))}
+            <div className="card-tags">
+              {props.topics.map((topic) => (
+                <span key={topic} className={styles.topic}>
+                  {topic}
+                </span>
+              ))}
+            </div>
           </div>
         )}
       </div>

src/components/card/card.module.scss

@@ -12,6 +12,9 @@
   .service-card {
     padding-bottom: 20px;
   }
+  .hidden {
+    display: none;
+  }
 }
 
 .logoHeader {
@@ -78,33 +81,6 @@
   }
 }
 
-.cmsLink {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  border-top-left-radius: 5px;
-  background: #ece9f7;
-  text-decoration: none;
-  font-size: 0.9rem;
-  padding: 0.33rem 1rem;
-  &::after {
-    content: "";
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    background: #4caa9f;
-    mask: url(/images/netlify-cms.png);
-    mask-size: cover;
-    position: relative;
-    top: 2px;
-    margin-left: 0.25rem;
-  }
-  &:hover {
-    background: #1a0e41;
-    color: white;
-  }
-}
-
 .cardContent {
   padding: 1.5rem;
   color: #47356f;
@@ -156,7 +132,7 @@
   padding: 0;
   color: #6a5a8a;
   text-transform: capitalize;
-  &:not(:nth-child(2)) {
+  &:not(:nth-child(1)) {
     &::before {
       content: "·";
       margin: 0 0.33rem;

src/pages/resources.astro

@@ -22,11 +22,7 @@ const tags = [...new Set(flatTags.map(JSON.stringify))].map(JSON.parse);
     <nav class="nav closed" id="tagList">
       Topics:{" "}
       {tags.map((tag, i) => {
-        return (
-          <button key={tag} onClick={() => onTagClick(tag)} class="tag">
-            {tag}
-          </button>
-        );
+        return <button class="tag">{tag}</button>;
       })}
       <button class="more" id="moreResourcesButton"> More </button>
     </nav>
@@ -51,6 +47,25 @@ const tags = [...new Set(flatTags.map(JSON.stringify))].map(JSON.parse);
   moreResourcesButton.addEventListener("click", () => {
     tagList.classList.toggle("closed");
   });
+
+  const cards = document.querySelectorAll(".card");
+  const tagButtons = document.querySelectorAll(
+    ".nav button:not(#moreResourcesButton), .card-tags button"
+  );
+  tagButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      let tagText = button.innerText.toLowerCase();
+      cards.forEach((card) => {
+        card.classList.add("hidden");
+      });
+      const cardsToShow = document.querySelectorAll(
+        ".card[data-tags*='" + tagText + "']"
+      );
+      cardsToShow.forEach((card) => {
+        card.classList.remove("hidden");
+      });
+    });
+  });
 </script>
 
 <style lang="scss">