--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/IndexList.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import md5 from 'md5';
+
+import IndexEntryItem from './IndexEntryItem';
+
+const IndexEntry = ({ letter, items }) => (
+  <li>
+    { letter }
+    <ul className="p-0 mb-2 small">
+      {
+        items.sort().map(indexEntryItem => <IndexEntryItem term={indexEntryItem} key={`${letter}_${md5(indexEntryItem)}`} />)
+      }
+    </ul>
+  </li>
+);
+
+IndexEntry.propTypes = {
+  letter: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const Index = ({ terms }) => {
+  const termsIndex = terms.reduce((res, term) => {
+    const firstLetter = term[0];
+    res[firstLetter] = (res[firstLetter] || []);
+    res[firstLetter].push(term);
+    return res;
+  }, {});
+
+  return (
+    <ul id="index" className="text-muted p-0">
+      {
+        Object.keys(termsIndex).sort().map(
+          letter => <IndexEntry letter={letter} items={termsIndex[letter]} key={letter} />,
+        )
+      }
+    </ul>
+  );
+};
+
+Index.propTypes = {
+  terms: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const IndexList = ({ terms, className }) => (
+  <div className={className}>
+    <Index terms={terms} />
+  </div>
+);
+
+IndexList.propTypes = {
+  terms: PropTypes.arrayOf(PropTypes.string).isRequired,
+  className: PropTypes.string.isRequired,
+};
+
+export default IndexList;