cleaned up structure, added styled components

src/components/Layout/index.tsx

@@ -5,15 +5,16 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import PropTypes from "prop-types"
+import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
-import Header from "./header"
+import Navbar from "../Navbar"
 import "./layout.scss"
-// import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+import { MainContent } from "./styles";
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css";
 
-const Layout = ({ children }) => {
+const Layout = ({ children }: PropsWithChildren<{}>) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -25,8 +26,8 @@ const Layout = ({ children }) => {
   `)
 
   return (
-    <>
-      <Header siteTitle={data.site.siteMetadata.title} />
+    <Scrollbar>
+      <Navbar siteTitle={data.site.siteMetadata.title} />
       <div
         style={{
           margin: `0 auto`,
@@ -35,19 +36,15 @@ const Layout = ({ children }) => {
           paddingTop: 0,
         }}
       >
-        <main>{children}</main>
+        <MainContent>{children}</MainContent>
         <footer>
           © {new Date().getFullYear()}, Built with
           {` `}
           <a href="https://www.gatsbyjs.org">Gatsby</a>
         </footer>
       </div>
-    </>
+    </Scrollbar>
   )
 }
 
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
 export default Layout

src/components/Layout/styles.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const MainContent = styled.main`
+  padding: 2.5em 0;
+`;

src/components/Navbar/index.tsx

@@ -1,15 +1,12 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
-import React from "react"
-import icon from "./icon.png"
 
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `#ba1a2e`,
-      marginBottom: `1.45rem`,
-    }}
-  >
+import { Link } from "gatsby";
+import PropTypes from "prop-types";
+import React from "react";
+import icon from "./icon.png";
+import { HeaderWrapper } from "./styles";
+
+const Navbar = ({ siteTitle }) => (
+  <HeaderWrapper>
     <div
       style={{
         margin: `0 auto`,
@@ -18,12 +15,11 @@ const Header = ({ siteTitle }) => (
       }}
     >
       <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
-        <img src={icon} style={{ width: "70px" }} />
+        {/* <img src={icon} style={{ width: "70px" }} /> */}
         <h1 style={{ margin: 0 }}>
           <Link
             to="/"
             style={{
-              paddingLeft: 25,
               color: `white`,
               textDecoration: `none`,
             }}
@@ -34,15 +30,15 @@ const Header = ({ siteTitle }) => (
       </div>
     </div>
 
-  </header >
+  </HeaderWrapper>
 )
 
-Header.propTypes = {
+Navbar.propTypes = {
   siteTitle: PropTypes.string,
 }
 
-Header.defaultProps = {
+Navbar.defaultProps = {
   siteTitle: ``,
 }
 
-export default Header
+export default Navbar;

src/components/Navbar/styles.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const HeaderWrapper = styled.header`
+  background: #ba1a2e;
+  marginBottom: 1.45rem;
+`;

src/components/SEO/index.tsx

@@ -1,16 +1,16 @@
-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import React from "react"
+import * as React from "react"
 import PropTypes from "prop-types"
 import Helmet from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 
-function SEO({ description, lang, meta, title }) {
+interface SEOProps {
+  readonly description: string;
+  readonly lang: string;
+  readonly meta: object[];
+  readonly title: string;
+}
+
+const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -72,17 +72,4 @@ function SEO({ description, lang, meta, title }) {
   )
 }
 
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-}
-
 export default SEO

src/components/image.js

@@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
-
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-}
-
-export default Image