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;
margin-bottom: 50px;
}
a {
color: #fff;
text-decoration: underline;
}
`;
const CenterImage = styled.img`
display: block;
margin: 0 auto;
margin-top: 10px;
width: 70%;
height: auto;
max-width: 600px;
`
const Header = styled.h1`
font-size: 3em;
margin: 0;
@media (max-width: 600px) {
font-size: 2em;
}
`
const SubHeader = styled.h2`
margin: 0;
line-height: 1em;
`
const HeaderDiv = styled.div`
margin-bottom: 20px;
`
type PageLayoutProps = {
children: React.ReactNode;
header?: string;
subheader?: string;
}
const PageLayout: React.FC = ({ children, header, subheader }) => {
return (
<>
{header && }
{subheader && {subheader}}
{children}
);
}
export default PageLayout;
export const generateHeader = (title: string, description: string) => {
return () => <>
{title} • PyDis Ops
;
}