Better individual scenes for documents

src/components/Document/Document.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import moment from 'moment';
+
+import { Avatar } from 'rebass';
+import Flex from 'components/Flex';
+
+import styles from './Document.scss';
+
+const Document = (props) => {
+  return (
+    <div className={ styles.container }>
+      <Flex align="center" className={ styles.user }>
+        <Avatar src={ props.document.user.avatarUrl } size={ 24 } />
+        <span className={ styles.userName }>
+          { props.document.user.name } published { moment(document.createdAt).fromNow() }
+        </span>
+      </Flex>
+
+      <div dangerouslySetInnerHTML={{ __html: props.document.html }} />
+    </div>
+  );
+};
+
+export default Document;

src/components/Document/Document.scss

@@ -0,0 +1,11 @@
+.container {
+  padding: 20px 0;
+}
+
+.user {
+  margin-bottom: 40px;
+}
+
+.userName {
+  margin: 0 0 0 10px;
+}

src/components/Document/index.js

@@ -0,0 +1,2 @@
+import Document from './Document';
+export default Document;