Add: Footer structure component

Author: rebecatschiedel

components/Footer.js

@@ -0,0 +1,21 @@
+import footerStyles from "../styles/Footer.module.css";
+
+export default function Footer() {
+  return (
+    <footer className={footerStyles.footer}>
+      <a
+        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={footerStyles.a}
+      >
+        Powered by{" "}
+        <img
+          src="/vercel.svg"
+          alt="Vercel Logo"
+          className={footerStyles.logo}
+        />
+      </a>
+    </footer>
+  );
+}

components/Layout.js

@@ -1,5 +1,6 @@
 import Nav from "./Nav";
 import styles from "../styles/Layout.module.css";
+import Footer from "./Footer";
 
 export default function Layout({ children }) {
   return (
@@ -8,6 +9,7 @@ export default function Layout({ children }) {
       <div className={styles.container}>
         <main className={styles.main}>{children}</main>
       </div>
+      <Footer />
     </>
   );
 }

pages/index.js

@@ -49,56 +49,6 @@ export default function Home() {
           </a>
         </div>
       </main>
-
-      <footer>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
-        </a>
-      </footer>
-
-      <style jsx>{`
-        footer {
-          width: 100%;
-          height: 100px;
-          border-top: 1px solid #eaeaea;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        footer img {
-          margin-left: 0.5rem;
-        }
-
-        footer a {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        a {
-          color: inherit;
-          text-decoration: none;
-        }
-
-        code {
-          background: #fafafa;
-          border-radius: 5px;
-          padding: 0.75rem;
-          font-size: 1.1rem;
-          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-        }
-
-        .logo {
-          height: 1em;
-        }
-      `}</style>
     </div>
   );
 }

styles/Footer.module.css

@@ -0,0 +1,36 @@
+.footer {
+  width: 100%;
+  height: 100px;
+  border-top: 1px solid #eaeaea;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer img {
+  margin-left: 0.5rem;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+} */
+
+.logo {
+  height: 1em;
+}