Covert Tag into a styted-component

Author: mariana-caldas

components/blog/Tag.js

@@ -1,12 +1,25 @@
-import styles from '@/styles/Blog.module.scss';
 import Link from 'next/link';
+import styled from 'styled-components';
 
-const Tag = ({ text }) => {
-  return (
-    <Link className={styles.tag} href={`/blog/category/${text}`}>
-      {text}
-    </Link>
-  );
-};
+export const TagContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 12rem;
+  overflow: hidden;
+  gap: 0.5rem;
+  margin-bottom: -1rem;
+  a {
+    text-decoration: none;
+  }
+`;
+
+const TagLink = styled(Link)`
+  background-color: #8cd5e8;
+  padding: 0.5rem 1rem;
+  border-radius: 2rem;
+  font-weight: bold;
+`;
 
-export default Tag;
+export const Tag = ({ text }) => {
+  return <TagLink href={`/blog/category/${text}`}>{text}</TagLink>;
+};

components/containers/Card.js

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import styles from '@/styles/Card.module.scss';
-import Tag from '@/components/blog/Tag';
+import { Tag, TagContainer } from '@/components/blog/Tag';
 
 export default function Card({
   card: { image, altTag, title, content, link, linkText, tagList },
@@ -30,11 +30,11 @@ export default function Card({
         {title}
       </h2>
       {tagList && tagList.length > 0 ? (
-        <div className={styles.tagListContainer}>
+        <TagContainer>
           {tagList.slice(0, 8).map((tag, i) => (
             <Tag key={i} text={tag} />
           ))}
-        </div>
+        </TagContainer>
       ) : null}
       <div className={styles.content}>
         <p>

styles/Blog.module.scss

@@ -51,31 +51,18 @@
   justify-content: center;
   margin-bottom: 3rem;
 
-  @include mobile {
-    justify-content: center;
-  }
-
   @include tablet {
-    justify-content: space-between;
-  }
-
-  @include desktop {
     justify-content: flex-start;
   }
 }
 
 .postContainer > div {
-  @include mobile {
-    flex-basis: 100%;
-  }
-
-  @include tablet {
-    flex-basis: 43%;
+  @include desktop {
+    flex-basis: 48%;
   }
 
-  @include desktop {
+  @include large-desktop {
     flex-basis: 32%;
-    max-width: 200px;
   }
 }
 
@@ -89,11 +76,3 @@
     content: unset;
   }
 }
-
-.tag {
-  background-color: $light-bg-color;
-  padding: 0.5rem 1rem;
-  border-radius: 2rem;
-  font-weight: bold;
-  text-decoration: none !important;
-}