--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/DefinitionBlock.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ReactMarkdown from 'react-markdown';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import AnnotationQuote from './AnnotationQuote';
+
+import './DefinitionBlock.scss';
+
+const DefinitionHeaderIcon = ({ annotation }) => {
+  const annotationText = annotation.text || '';
+  let faIconName;
+
+  if (annotationText) {
+    faIconName = 'user';
+  } else if (/^https?:\/\/.+\.wikipedia\.org/.test(annotation.uri)) {
+    faIconName = ['fab', 'wikipedia-w'];
+  } else {
+    faIconName = 'globe';
+  }
+
+  return <FontAwesomeIcon icon={faIconName} className="annotation-card-definition-icon" />;
+};
+
+DefinitionHeaderIcon.propTypes = {
+  annotation: PropTypes.object.isRequired,
+};
+
+const DefinitionUser = ({ annotation }) => {
+  const [userName] = annotation.user.replace('acct:', '').split('@');
+
+  return (
+    <strong>
+      { userName }
+      {/* <span className="text-muted">@{ instanceName }</span> */}
+    </strong>
+  );
+};
+
+DefinitionUser.propTypes = {
+  annotation: PropTypes.object.isRequired,
+};
+
+const DefinitionBody = ({ annotation, metacategories }) => {
+  if (annotation.text) {
+    return <ReactMarkdown source={annotation.text} />;
+  }
+  return <AnnotationQuote annotation={annotation} metacategories={metacategories} />;
+};
+
+DefinitionBody.propTypes = {
+  annotation: PropTypes.object.isRequired,
+  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+
+const DefinitionBlock = ({ annotation, metacategories }) => {
+  const { document } = annotation;
+
+  return (
+    <div className="card definition-card">
+      <div className="card-header">
+        <DefinitionHeaderIcon annotation={annotation} />
+      </div>
+      <div className="card-body small">
+        <DefinitionBody annotation={annotation} metacategories={metacategories} />
+      </div>
+      <div className="card-footer">
+        <a href={annotation.links.incontext} target="_blank" rel="noopener noreferrer">{ document.title }</a>
+        <div>
+          <DefinitionUser annotation={annotation} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+DefinitionBlock.propTypes = {
+  annotation: PropTypes.object.isRequired,
+  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default DefinitionBlock;