convert components to ts, add theme stuff, new dir structures

.prettierrc

@@ -1,4 +1,4 @@
 {
   "arrowParens": "avoid",
-  "semi": false
+  "semi": true
 }

src/components/Footer/Footer.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+
+const Layout = styled.footer`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+`;
+
+const Footer: React.FC = () => {
+  return (
+    <Layout>
+      © {new Date().getFullYear()}, Built by
+      {` `}
+      <a href="https://www.verypossible.com">Very</a>
+    </Layout>
+  );
+};
+
+export default Footer;

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from "./Footer";

src/components/Header/Header.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Link } from "gatsby";
+import { color, toRem } from "../../theme";
+
+interface HeaderProps {
+  children?: React.ReactNode;
+}
+
+const Layout = styled.header`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: ${toRem(40)};
+  margin-bottom: ${toRem(20)};
+  padding: 0 ${toRem(40)};
+  background-color: ${color.primary[10]};
+  color: ${color.secondary[100]};
+`;
+
+const Header: React.FC<HeaderProps> = ({ children }: HeaderProps) => {
+  return (
+    <Layout>
+      <h1>
+        <Link to="/">Very Design</Link>
+      </h1>
+
+      {children}
+    </Layout>
+  );
+};
+
+export default Header;

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from "./Header"

src/components/Image/index.ts

@@ -0,0 +1 @@
+export { default as Image } from "./Image";

src/components/Layout/Layout.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Footer } from "../Footer";
+import { Header } from "../Header";
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const Main = styled.main`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+`;
+
+const Layout: React.FC<LayoutProps> = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <Header />
+      <Main>{children}</Main>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;

src/components/Layout/index.ts

@@ -0,0 +1 @@
+export { default as Layout } from "./Layout";

src/components/seo.js → src/components/SEO/SEO.tsx

@@ -1,16 +1,20 @@
-/**
- * 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 { Helmet } from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
 
-import React from "react"
-import PropTypes from "prop-types"
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+interface SEOProps {
+  description?: string;
+  lang?: string;
+  meta?: any;
+  title: string;
+}
 
-function SEO({ description, lang, meta, title }) {
+const SEO: React.FC<SEOProps> = ({
+  description = "",
+  lang = "en",
+  meta = [],
+  title,
+}: SEOProps) => {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -23,9 +27,9 @@ function SEO({ description, lang, meta, title }) {
         }
       }
     `
-  )
+  );
 
-  const metaDescription = description || site.siteMetadata.description
+  const metaDescription = description || site.siteMetadata.description;
 
   return (
     <Helmet
@@ -69,20 +73,7 @@ function SEO({ description, lang, meta, title }) {
         },
       ].concat(meta)}
     />
-  )
-}
-
-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
+export default SEO;

src/components/SEO/index.ts

@@ -0,0 +1 @@
+export { default as SEO } from "./SEO";

src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Footer";
+export * from "./Header";
+export * from "./Image";
+export * from "./Layout";
+export * from "./SEO";