refact: extra footer into its own component

src/components/DocsLayout/index.tsx

@@ -9,6 +9,7 @@ import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
 import DocsSidebar from "../DocsSidebar"
+import Footer from "../Footer"
 import * as SC from "./styles"
 
 const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
@@ -31,11 +32,7 @@ const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
           {children}
         </SC.MainContent>
       </SC.Main>
-      <footer>
+      <Footer />
-        © {new Date().getFullYear()}, Built with
-        {` `}
-        <a href="https://www.gatsbyjs.org">Gatsby</a>
-      </footer>
     </div>
   )
 }

src/components/Footer/index.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import * as SC from "./styles"
+import Container from "../Container"
+
+const Footer = () => {
+  return (
+    <SC.FooterWrapper>
+      <Container>
+        © {new Date().getFullYear()}, Built with
+        {` `}
+        <a href="https://www.gatsbyjs.org">Gatsby</a>
+      </Container>
+    </SC.FooterWrapper>
+  )
+}
+
+export default Footer

src/components/Footer/styles.tsx

@@ -0,0 +1,4 @@
+import { Link } from "gatsby"
+import styled from "styled-components"
+
+export const FooterWrapper = styled.footer``

src/components/Layout/index.tsx

@@ -9,6 +9,7 @@ import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
 import Container from "../Container"
+import Footer from "../Footer"
 import Sidebar from "../Sidebar"
 import "./layout.scss"
 import * as SC from "./styles"
@@ -37,13 +38,7 @@ const Layout = ({ children }: PropsWithChildren<{}>) => {
           </SC.MainContent>
         </SC.Main>
       </Container>
-      <footer>
+      <Footer />
-        <Container>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </Container>
-      </footer>
     </Scrollbar>
   )
 }