/* @jsx jsx */ import { jsx, BaseStyles } from 'theme-ui'; import { Helmet } from 'react-helmet'; import { Global } from '@emotion/core'; import { Header } from './Header'; interface PageProps { children: React.ReactNode; } export function Page({ children }: PageProps) { return ( <BaseStyles> <Helmet> <title>useComments</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;1,400&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&display=swap" rel="stylesheet" /> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💬</text></svg>" /> </Helmet> <Global styles={{ html: { scrollBehavior: 'smooth' } }} /> <div sx={{ py: 3, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', margin: 0, height: '100%', }} > <Header /> {children} <footer sx={{ py: 4, textAlign: 'center' }}> © 2020 ・ Built with 💜 by{' '} <a href="https://twitter.com/aleksandrasays">Aleksandra Sikora</a>・ Powered by <a href="https://hasura.io">Hasura</a> </footer> </div> </BaseStyles> ); }