chore: rename docs to resources

src/components/ResourcesLayout/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * Layout component that queries for data
+ * with Gatsby's useStaticQuery component
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+import React, { PropsWithChildren } from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+import { GlobalStyles } from "../../globalStyles"
+import { ResourcesSidebar } from "../ResourcesSidebar"
+import { Footer } from "../Footer"
+import * as SC from "./styles"
+
+export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  return (
+    <div>
+      <GlobalStyles />
+      <SC.Main>
+        <ResourcesSidebar />
+        <SC.MainContent>
+          <h1>{data.site.siteMetadata.title}</h1>
+          {children}
+        </SC.MainContent>
+      </SC.Main>
+      <Footer />
+    </div>
+  )
+}

src/components/ResourcesLayout/styles.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components"
+
+export const Main = styled.div`
+  display: flex;
+  margin: 128px auto 64px !important;
+  width: 100%;
+`
+
+export const MainContent = styled.main`
+  flex: 1 1 auto;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+`