1 files changed, 67 insertions, 0 deletions
diff --git a/components/Layout.js b/components/Layout.js
new file mode 100644
index 0000000..f77ea0c
--- /dev/null
+++ b/components/Layout.js
@@ -0,0 +1,67 @@
+import React, {useState} from 'react'
+import Head from 'next/head'
+import Context from '../context';
+import Header from './Header'
+import Popup from './Popup'
+import PropTypes from 'prop-types'
+
+const Layout = ({ children, apps, setApps}) => {
+  const [popup, setPopup] = useState({})
+
+  return (
+    <Context.Provider value={{ setPopup }}>
+      <Head>
+        <title>Notes App</title>
+      </Head>
+      <main>
+        <div className="container">{children}</div>
+      </main>
+      <Header apps={apps} setApps={setApps} />
+      <Popup popup={popup} />
+      <style jsx global>{`
+        main {
+          position: fixed;
+          top: 2em;
+          left: 0;
+          bottom: 0;
+          right: 0;
+        }
+
+        body {
+          margin: 0;
+          color: #222;
+          height: 100vh;
+          overflow: hidden;
+
+          background: #50a3a2;
+          background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+          background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+          background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+          background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
+
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+            'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
+            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        }
+
+        textarea, input {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+            'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
+            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        }
+
+        .container {
+          margin: 1.5rem auto;
+          padding-left: 2rem;
+          padding-right: 2rem;
+        }
+      `}</style>
+    </Context.Provider>
+  )
+}
+
+export default Layout
+
+Layout.propTypes = {
+  children: PropTypes.node,
+}