Renamed /src to /frontend

frontend/components/AtlasPreview/AtlasPreview.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import Link from 'react-router/lib/Link';
+
+import DocumentLink from './components/DocumentLink';
+
+import styles from './AtlasPreview.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+@observer
+class AtlasPreview extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.object.isRequired,
+  }
+
+  render() {
+    const data = this.props.data;
+
+    return (
+      <div className={ styles.container }>
+        <h2><Link to={ `/atlas/${data.id}` } className={ styles.atlasLink }>{ data.name }</Link></h2>
+        { data.recentDocuments.length > 0 ?
+          data.recentDocuments.map(document => {
+            return (
+              <DocumentLink document={ document } key={ document.id } />)
+          })
+        : (
+          <div className={ styles.description }>No documents. Why not <Link to={ `/atlas/${data.id}/new` }>create one</Link>?</div>
+        ) }
+      </div>
+    );
+  }
+};
+
+export default AtlasPreview;

frontend/components/AtlasPreview/AtlasPreview.scss

@@ -0,0 +1,19 @@
+@import '~styles/constants.scss';
+
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding-bottom: 40px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.atlasLink {
+  text-decoration: none;
+  color: $textColor;
+}
+
+.description {
+  color: #aaa;
+}

frontend/components/AtlasPreview/components/DocumentLink/DocumentLink.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { observer } from "mobx-react"
+
+import moment from 'moment';
+import Link from 'react-router/lib/Link';
+
+import styles from './DocumentLink.scss';
+
+const DocumentLink = observer((props) => {
+  return (
+    <Link to={ `/documents/${props.document.id}` } className={ styles.link }>
+      <h3 className={ styles.title }>{ props.document.title }</h3>
+      <span className={ styles.timestamp }>{ moment(props.document.updatedAt).fromNow() }</span>
+    </Link>
+  );
+});
+
+export default DocumentLink;

frontend/components/AtlasPreview/components/DocumentLink/DocumentLink.scss

@@ -0,0 +1,23 @@
+@import '~styles/constants.scss';
+
+.link {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  margin-bottom: 20px;
+  text-decoration: none;
+}
+
+.title {
+  font-weight: normal;
+  font-size: 15px;
+  color: $textColor;
+
+  margin: 0;
+}
+
+.timestamp {
+  font-size: 13px;
+  color: #ccc;
+}

frontend/components/AtlasPreview/components/DocumentLink/index.js

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

frontend/components/AtlasPreview/index.js

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