Merge pull request #249 from Web-Dev-Path/refactor/to-scss-BlogPostsContainer

Refactor/to scss blog posts container

Author: briangesteban

CHANGELOG.md

@@ -163,5 +163,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - ButtonLink
   - SubmitButton
   - AuthorBio
-  
+  - BlogPostsContainer
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility

components/blog/BlogPostsContainer/BlogPostsContainer.module.scss

@@ -0,0 +1,57 @@
+@use '@/styles/mixins' as *;
+@use '@/styles/variables' as *;
+
+.blogContainer {
+  display: flex;
+  flex-direction: column;
+  margin: 3rem 0;
+}
+
+.postContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 3rem;
+
+  @include tablet {
+    justify-content: flex-start;
+  }
+
+  & > div {
+    @include desktop {
+      flex-basis: 48%;
+    }
+  }
+
+  @include large-desktop {
+    flex-basis: 32%;
+  }
+}
+
+.bottomLink {
+  font-size: 1.5rem;
+  font-weight: bold;
+  position: relative;
+  display: block;
+  text-align: center;
+}
+
+.viewAllBottomLink {
+  @extend .bottomLink;
+  top: -3rem;
+
+  @include desktop {
+    float: right;
+    top: -5rem;
+  }
+}
+
+.backBottomLink {
+  @extend .bottomLink;
+  top: -2rem;
+
+  @include desktop {
+    float: left;
+    top: -1rem;
+  }
+}

components/blog/BlogPostsContainer/index.js

@@ -1,10 +1,11 @@
+import Link from 'next/link';
 import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
 import Title from '@/components/snippets/Title';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
-import S from './styles';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
+import styles from './BlogPostsContainer.module.scss';
 
 const BlogPostsContainer = ({
   posts,
@@ -24,7 +25,7 @@ const BlogPostsContainer = ({
 
   return (
     <RevealContentContainer>
-      <S.BlogContainer>
+      <section className={styles.blogContainer}>
         {heading ? (
           <Container>
             <Title title={heading} />
@@ -34,40 +35,41 @@ const BlogPostsContainer = ({
             <Title title={tagToHeading[tag]} />
           </Container>
         ) : null}
-        {
-          swipe ? (
-            <>
-              {[posts.slice(0,6)].map((p, index) => (
-                <BlogCardsColumns key={index} cards={p} />
+        {swipe ? (
+          <>
+            {[posts.slice(0, 6)].map((p, index) => (
+              <BlogCardsColumns key={index} cards={p} />
+            ))}
+          </>
+        ) : (
+          <Container>
+            <div className={styles.postContainer}>
+              {posts?.map((p, index) => (
+                <BlogCard $cardType='blog' key={index} card={p} />
               ))}
-            </>
-          ) : (
-            <Container>
-              <S.PostContainer>
-                {posts?.map((p, index) => (
-                  <BlogCard $cardType='blog' key={index} card={p} />
-                ))}
-              </S.PostContainer>
-            </Container>
-          )
-        }
+            </div>
+          </Container>
+        )}
 
         {viewall && posts.length >= 3 ? (
           <Container>
-            <S.ViewAllBottomLink
+            <Link
               href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
+              className={styles.viewAllBottomLink}
             >
               view all
-            </S.ViewAllBottomLink>
+            </Link>
           </Container>
         ) : null}
 
         {back ? (
           <Container>
-            <S.BackBottomLink href={`/blog`}>&#60; back</S.BackBottomLink>
+            <Link href={`/blog`} className={styles.backBottomLink}>
+              &#60; back
+            </Link>
           </Container>
         ) : null}
-      </S.BlogContainer>
+      </section>
     </RevealContentContainer>
   );
 };