--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/AnnotationsCards.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,63 @@
+
+import _ from 'lodash';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import DocumentAnnotations from './DocumentAnnotations';
+
+const AnnotationsCards = ({
+  annotations,
+  viaBaseUrl,
+  metacategories,
+  categories,
+  children,
+}) => {
+  const documents = _(annotations).groupBy('uri');
+
+  const documentAnnotations = documents.map((docAnnotations, uri) => {
+    const document = {
+      uri,
+      title: docAnnotations[0].document.title,
+      annotations: docAnnotations,
+    };
+
+    return (
+      <DocumentAnnotations
+        key={document.uri}
+        document={document}
+        viaBaseUrl={viaBaseUrl}
+        metacategories={metacategories}
+        categories={categories}
+      />
+    );
+  }).value();
+
+  let noAnnotationContent = <FormattedMessage id="ui.annotationsCards.noAnnotation" defaultMessage="No annotation" />;
+  if (React.Children.count(children) > 0) {
+    noAnnotationContent = children;
+  }
+
+  return (
+    <div className="card-columns">
+      { annotations.length === 0 ? noAnnotationContent : documentAnnotations }
+    </div>
+  );
+};
+
+AnnotationsCards.propTypes = {
+  annotations: PropTypes.arrayOf(PropTypes.object),
+  viaBaseUrl: PropTypes.string.isRequired,
+  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
+  categories: PropTypes.arrayOf(PropTypes.string).isRequired,
+  children: PropTypes.node,
+};
+
+AnnotationsCards.defaultProps = {
+  annotations: [],
+  children: null,
+};
+
+export default AnnotationsCards;