Add Page component for layout

lukemorton · lukemorton · commit 9bb23336de26 · 2017-11-18T22:22:40.000Z
diff --git a/components/Common/components/Page.test.tsx b/components/Common/components/Page.test.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import Page from './Page'
+
+describe('<Page />', () => {
+  it('should use children', () => {
+    const page = shallow(<Page title='title'>Cool</Page>)
+    expect(page).toIncludeText('Cool')
+  })
+})
diff --git a/components/Common/components/Page.tsx b/components/Common/components/Page.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import Head from 'next/head'
+
+export default ({ title, children }) =>
+  <div>
+    <style jsx>{`
+      main {
+        margin: 6em auto;
+        width: 40em;
+      }
+    `}</style>
+
+    <Head>
+      <title>{title}</title>
+    </Head>
+
+    <main>
+      {children}
+    </main>
+  </div>
diff --git a/components/Common/index.ts b/components/Common/index.ts
@@ -0,0 +1,3 @@
+import Page from './components/Page'
+
+export { Page }
diff --git a/pages/users/profile.tsx b/pages/users/profile.tsx
@@ -1,23 +1,19 @@
 import * as React from 'react'
 import app from '../../lib/app'
+import User from '../../lib/user/User'
+import { Page } from '../../components/Common'
 import { Profile } from '../../components/User'
 
 export default app.page(class extends React.Component {
   props: {
-    user: {
-      name: string,
-      biography: string,
-      twitter: string
-    }
+    user: User
   }
 
   render () {
     return (
-      <div>
-        <h1>Hello world!</h1>
-
+      <Page title={this.props.user.name}>
         <Profile {...this.props.user} />
-      </div>
+      </Page>
     )
   }
 })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import Page from './components/Page'`
	`2`	`+`
	`3`	`+export { Page }`