--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/Annotation.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedRelative } from 'react-intl';
+import ReactMarkdown from 'react-markdown';
+
+import Tag from './Tag';
+import AnnotationQuote from './AnnotationQuote';
+
+export default class Annotation extends Component {
+  user() {
+    const { annotation } = this.props;
+
+    const [userName, instanceName] = annotation.user.replace('acct:', '').split('@');
+
+    return (
+      <strong>
+        { userName }
+        <span className="text-muted">{`@${instanceName}`}</span>
+      </strong>
+    );
+  }
+
+  tags() {
+    const { annotation, metacategories, categories } = this.props;
+
+    const tagMetacategories = [];
+    const others = [];
+
+    annotation.tags.forEach((tagStr) => {
+      if (tagStr.startsWith('cat:')) {
+        tagMetacategories.push(tagStr);
+      } else {
+        others.push(tagStr);
+      }
+    });
+
+    /* eslint-disable max-len */
+    return (
+      <div className="tags">
+        { tagMetacategories.map(tag => <Tag tag={tag} metacategories={metacategories} categories={categories} />) }
+        { others.map(tag => <Tag tag={tag} metacategories={metacategories} categories={categories} />) }
+      </div>
+    );
+    /* eslint-enable max-len */
+  }
+
+  render() {
+    const { annotation, metacategories } = this.props;
+
+    const dateUpdated = (
+      <FormattedRelative
+        value={annotation.updated}
+      />
+    );
+
+    let body = '';
+
+    if (annotation.text || annotation.text !== '') {
+      body = (
+        <div className="comment-body text-muted font-italic">
+          <ReactMarkdown source={(annotation.text)} />
+        </div>
+      );
+    }
+
+    return (
+      <div className="card">
+        <div className="card-header">
+          <a href={annotation.uri}>{ annotation.document.title }</a>
+        </div>
+        <ul className="list-group list-group-flush small">
+          <li className="highlight list-group-item d-block">
+            <AnnotationQuote annotation={annotation} metacategories={metacategories} />
+            <div className="comment-info">
+              { `${this.user()} - ${dateUpdated} `}
+              <a href={annotation.links.incontext}>#</a>
+            </div>
+            { body }
+            { this.tags() }
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+Annotation.propTypes = {
+  annotation: PropTypes.isRequired,
+  metacategories: PropTypes.isRequired,
+  categories: PropTypes.isRequired,
+};