chore

package.json

@@ -5,9 +5,11 @@
   "author": "Scott Moss <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "@theme-ui/presets": "^0.3.0",
     "next": "^9.5.0",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "theme-ui": "^0.3.1"
   },
   "scripts": {
     "dev": "next",

pages/_app.jsx

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import { ThemeProvider } from 'theme-ui'
+import theme from '../theme'
+import Nav from '../src/components/nav'
+
+export default function App({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <div>
+        <Nav />
+        <Component {...pageProps} />
+      </div>      
+    </ThemeProvider>
+  )
+}

pages/index.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
 import Link from 'next/link'
 
 export default () => (
-  <div>
-    <h1>Index page</h1>
-
-    <Link href="/notes">
-      <a>Notes</a>
-    </Link>
+  <div sx={{ height: `calc(100vh - 60px)`}}>
+    <div sx={{variant: 'containers.page', display: 'flex', alignItems: 'center', height: '100%'}}>
+      <h1 sx={{fontSize: 8, my: 0}}>This is a really dope note taking app.</h1>
+    </div>
   </div> 
 )

pages/notes/[id].jsx

@@ -1,4 +1,5 @@
-import React from 'react'
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 
@@ -7,12 +8,8 @@ export default () => {
   const { id }= router.query
 
   return (
-    <div>
+    <div sx={{variant: 'containers.page'}}>
       <h1>Note: {id} </h1>
-
-      <Link href="/notes">
-        <a>Notes</a>
-      </Link>
     </div>
   )
 }

pages/notes/index.jsx

@@ -1,22 +1,27 @@
-import React from 'react'
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
 import Link from 'next/link'
 
 export default () => {
-  const notes = new Array(15).fill(1).map((e, i) => ({id: i, title: `Note: ${i}`}))
+  const notes = new Array(15).fill(1).map((e, i) => ({id: i, title: `This is my note ${i}`}))
 
   return (
-    <div>
-      <h1>Notes</h1>
+    <div sx={{variant: 'containers.page'}}>
+      <h1>My Notes</h1>
 
-      {notes.map(note => (
-        <div>
-          <Link key={note.id} href="/notes/[id]" as={`/notes/${note.id}`}>
-            <a>
-              <strong>{note.title}</strong>
-            </a>
-          </Link>
-        </div>
-      ))}
+      <div sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap'}}>
+        {notes.map(note => (
+          <div sx={{width: '33%', p: 2}}>
+            <Link key={note.id} href="/notes/[id]" as={`/notes/${note.id}`}>
+              <a sx={{textDecoration: 'none', cursor: 'pointer'}}>
+                <div sx={{variant: 'containers.card',}}>
+                  <strong>{note.title}</strong>
+                </div>
+              </a>
+            </Link>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }

src/components/nav.jsx

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import Link from 'next/link'
+
+const Nav = () => (
+  <header sx={{height: '60px', width: '100vw', bg: 'primary', borderBottom: '1px solid', borderColor: 'primary'}}>
+    <nav sx={{display: 'flex', alignItems: 'center',  justifyContent: 'space-between', variant: 'containers.page', height: '100%'}}>
+      <Link href="/">
+        <a sx={{fontWeight: 'bold', fontSize: 4, cursor: 'pointer'}}>Note App</a>
+      </Link>
+
+      <Link href="/notes">
+        <a sx={{color: 'text', fontSize: 3, cursor: 'pointer'}}>notes</a>
+      </Link>
+
+    </nav>
+  </header>
+)
+
+export default Nav

theme.js

@@ -0,0 +1,25 @@
+import { roboto } from '@theme-ui/presets'
+
+const theme = {
+  ...roboto,
+  containers: {
+    card: {
+      boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+      border: '1px solid',
+      borderColor: 'muted',
+      borderRadius: '4px',
+      p: 2,
+    },
+    page: {
+      width: '100%',
+      maxWidth: '960px',
+      m: 0,
+      mx: 'auto',
+    }
+  },
+  styles: {
+    ...roboto.styles
+  }
+}
+
+export default theme