1 files changed, 80 insertions, 0 deletions
diff --git a/src/layout/page.tsx b/src/layout/page.tsx
new file mode 100644
index 0000000..c133462
--- /dev/null
+++ b/src/layout/page.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import styled, { createGlobalStyle } from "styled-components";
+
+import logo from "../images/logo.svg";
+import logoPng from "../images/logo.png";
+
+import tile from "../images/banner_pattern.svg";
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    background: url(${tile});
+    background-size: 128px;
+    font-family: 'Titillium Web', Arial, sans-serif;
+    margin-left: 5vw;
+    margin-right: 5vw;
+    color: #fff;
+  }
+`;
+
+const CenterImage = styled.img`
+  display: block;
+  margin: 0 auto;
+  margin-top: 50px;
+  width: 70%;
+  height: auto;
+  max-width: 600px;
+`
+
+const Header = styled.h1`
+  font-size: 3em;
+  margin: 0;
+`
+
+const SubHeader = styled.h2`
+margin: 0;
+`
+
+const HeaderDiv = styled.div`
+  margin-bottom: 20px;
+`
+
+type PageLayoutProps = {
+  children: React.ReactNode;
+  header?: string;
+  subheader?: string;
+}
+
+const PageLayout: React.FC<PageLayoutProps> = ({ children, header, subheader }) => {
+  return (
+    <>
+      <GlobalStyle />
+      <main>
+        <CenterImage src={logo} alt="DevOps Logo" />
+        <HeaderDiv>
+          {header && <Header>{header}</Header>}
+          {subheader && <SubHeader>{subheader}</SubHeader>}
+        </HeaderDiv>
+        {children}
+      </main >
+    </>
+  );
+}
+
+export default PageLayout;
+
+export const generateHeader = (title: string, description: string) => {
+  return () => <>
+    <title>{title} &bull; PyDis Ops</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet"></link>
+    <meta name="description" content={description} />
+    <meta name="og:title" content={title} />
+    <meta name="og:image" content={logoPng} />
+    <meta name="theme-color" content="#a0cef3" />
+  </>;
+}
+