add tags to card

Author: cherylli

components/blog/BlogPostsContainer.js

@@ -4,6 +4,7 @@ import Title from '@/components/snippets/Title';
 import Link from 'next/link';
 import styles from '@/styles/Blog.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
+import { tagToHeading } from '@/utils/blogCategories';
 
 function* splitPosts(arr, n) {
   for (let i = 0; i < arr.length; i += n) {
@@ -23,7 +24,11 @@ const BlogPostsContainer = ({ posts, heading, tag, swipe = true }) => {
   return (
     <RevealContentContainer>
       <div className={styles.blogContainer}>
-        {heading ? <Title customClass='blogTitle' title={heading} /> : null}
+        {heading ? (
+          <Title customClass='blogTitle' title={heading} />
+        ) : tag ? (
+          <Title customClass='blogTitle' title={tagToHeading[tag]} />
+        ) : null}
         {
           // put in rows of 3 if more than 3 posts (for swipable cards)
           swipe ? (

components/blog/Tag.js

@@ -0,0 +1,7 @@
+import styles from '@/styles/Blog.module.scss';
+
+const Tag = ({ text }) => {
+  return <div className={styles.tag}>{text}</div>;
+};
+
+export default Tag;

components/containers/Card.js

@@ -1,9 +1,10 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import styles from '@/styles/Card.module.scss';
+import Tag from '@/components/blog/Tag';
 
 export default function Card({
-  card: { image, altTag, title, content, link, linkText },
+  card: { image, altTag, title, content, link, linkText, tagList },
   customClass,
 }) {
   const LinkComponent = link?.startsWith('http') ? (
@@ -28,6 +29,13 @@ export default function Card({
       <h2 className={styles.title} title={title}>
         {title}
       </h2>
+      {tagList && tagList.length > 0 ? (
+        <div className={styles.tagListContainer}>
+          {tagList.map((tag, i) => (
+            <Tag key={i} text={tag} />
+          ))}
+        </div>
+      ) : null}
       <div className={styles.content}>
         <p>
           {content} {link && LinkComponent}

styles/Blog.module.scss

@@ -50,3 +50,10 @@
 .postContainer > div:last-child:nth-child(3n + 1) {
   margin: 1.5rem auto 0 16%;
 }
+
+.tag {
+  background-color: $light-bg-color;
+  padding: 0.5rem 1rem;
+  border-radius: 2rem;
+  font-weight: bold;
+}

styles/Card.module.scss

@@ -131,4 +131,10 @@
       overflow: hidden;
     }
   }
+
+  .tagListContainer {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: -1rem;
+  }
 }

styles/SearchBar.module.scss

@@ -4,7 +4,7 @@
 .searchBar {
   display: flex;
   justify-content: space-between;
-  width: 15rem;
+  width: 19rem;
   height: 2.5rem;
   border-radius: 0.5rem;
   border: 0;
@@ -32,6 +32,7 @@
     height: 100%;
     border: 0;
     padding-left: 1rem;
+    width: 16rem;
   }
 
   button[type='submit'] {
@@ -43,5 +44,6 @@
     background-size: cover;
     background-repeat: no-repeat;
     margin: 0.5rem 1rem 0.5rem 0;
+    cursor: pointer;
   }
 }