feat: update Layout component,

enhance the Layout component to use some more semantic CSS styles, see also: #12
64J0 · Oct 23, 2021 · 2be922a · 2be922a
1 parent fb5ea39
commit 2be922a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 57 deletions.
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { FaTwitter, FaGithub, FaLinkedin } from "react-icons/fa";
 
 import HeaderHome from "../HeaderHome";
@@ -14,34 +14,32 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children, home }) => {
   return (
-    <>
-      <div className={styles['layout-container']}>
-        <header className={styles.header}>
-          {home ? (<HeaderHome />) : (<HeaderPost />)}
-        </header>
-
-        <main className={styles.main}>
-          {children}
-        </main>
-
-        <footer className={styles.footer}>
-          <span>
-            &copy; Vinícius Gajo Marques Oliveira. All rights reserved.
+    <div className={styles.layout}>
+      <header className={styles['layout__head']}>
+        {home ? <HeaderHome /> : <HeaderPost />}
+      </header>
+
+      <main className={styles['layout__body']}>
+        {children}
+      </main>
+
+      <footer className={styles['layout__footer']}>
+        <span>
+          &copy; Vinícius Gajo Marques Oliveira. All rights reserved.
           </span>
-          <span className={styles['icon-container']}>
-            <a href="https://twitter.com/viniciusgajo">
-              <FaTwitter size="1.8rem" className={styles.item} />
-            </a>
-            <a href="https://github.com/64J0">
-              <FaGithub size="1.8rem" className={styles.item} />
-            </a>
-            <a href="https://www.linkedin.com/in/vinicius-gajo/">
-              <FaLinkedin size="1.8rem" className={styles.item} />
-            </a>
-          </span>
-        </footer>
-      </div>
-    </>
+        <span className={styles['social__container']}>
+          <a href="https://twitter.com/viniciusgajo">
+            <FaTwitter size="1.8rem" className={styles['social__item']} />
+          </a>
+          <a href="https://github.com/64J0">
+            <FaGithub size="1.8rem" className={styles['social__item']} />
+          </a>
+          <a href="https://www.linkedin.com/in/vinicius-gajo/">
+            <FaLinkedin size="1.8rem" className={styles['social__item']} />
+          </a>
+        </span>
+      </footer>
+    </div>
   );
 }
 

diff --git a/components/Layout/styles.module.scss b/components/Layout/styles.module.scss
@@ -1,58 +1,38 @@
-$max-width: 72rem;
-
-.layout-container {
-  height: 100%;
+.layout {
   width: 100%;
-
+  height: 100%;
   margin: 0 auto;
   padding: 0;
 }
 
-.header {
+.layout__head {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 
   margin: 0;
   border-radius: 5rem 5rem 0 0;
-
-  .headerImage {
-    width: 7rem;
-    height: 7rem;
-    margin: 0 auto;
-  }
-
-  .headerHomeImage {
-    width: 11rem;
-    height: 11rem;
-    margin: 0 auto;
-    border: 4px solid rgba(255, 255, 255, 0.5);
-  }
-
-  .backToHome {
-    margin: 3rem 0 0;
-  }
 }
 
-.main {
+.layout__body {
   padding: 0.6rem 1.2rem;
   margin: 0 auto;
-  max-width: $max-width;
+  max-width: var(--maxWidth);
 }
 
-.footer {
+.layout__footer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 5rem auto 3rem;
-  max-width: $max-width;
+  max-width: var(--maxWidth);
   color: var(--white);
 
-  .icon-container {
+  .social__container {
     max-width: 130px;
 
-    .item {
+    .social__item {
       margin: 0 8px;
       cursor: pointer;
       transition: 0.4s;