1 files changed, 76 insertions, 0 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
new file mode 100644
index 000000000..289260f12
--- /dev/null
+++ b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
@@ -0,0 +1,76 @@
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Avatar             from '../../../components/avatar';
+import DisplayName        from '../../../components/display_name';
+import { Link }           from 'react-router';
+
+const outerStyle = {
+  marginBottom: '10px',
+  borderTop: '1px solid #616b86'
+};
+
+const headerStyle = {
+  fontSize: '14px',
+  fontWeight: '500',
+  display: 'block',
+  padding: '10px',
+  color: '#9baec8',
+  background: '#454b5e',
+  width: '120px',
+  marginTop: '-18px'
+};
+
+const itemStyle = {
+  display: 'block',
+  padding: '10px',
+  color: '#9baec8',
+  overflow: 'hidden',
+  textDecoration: 'none'
+};
+
+const displayNameStyle = {
+  display: 'block',
+  fontWeight: '500'
+};
+
+const acctStyle = {
+  display: 'block'
+};
+
+const SuggestionsBox = React.createClass({
+
+  propTypes: {
+    accounts: ImmutablePropTypes.list.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    const accounts = this.props.accounts.take(2);
+
+    return (
+      <div style={outerStyle}>
+        <strong style={headerStyle}>Who to follow</strong>
+
+        {accounts.map(account => {
+          let displayName = account.get('display_name');
+
+          if (displayName.length === 0) {
+            displayName = account.get('username');
+          }
+
+          return (
+            <Link key={account.get('id')} style={itemStyle} to={`/accounts/${account.get('id')}`}>
+              <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
+              <strong style={displayNameStyle}>{displayName}</strong>
+              <span style={acctStyle}>{account.get('acct')}</span>
+            </Link>
+          )
+        })}
+      </div>
+    );
+  }
+
+});
+
+export default SuggestionsBox;