create Infrastructure function

src/client/js/components/TagsList.jsx

@@ -74,7 +74,11 @@ export default class TagsList extends React.Component {
     return tagData.map((data) => {
       return (
         <a key={data.name} href={`/_search?q=tag:${data.name}`} className="list-group-item">
-          <p className="float-left my-0">{data.name}</p>
+          <div className="d-flex">
+            <i className="list-tag-icon icon-tag"></i>
+            <p className="my-0 list-tag-name"> {data.name}</p>
+            <span className="list-tag-count">{data.count}</span>
+          </div>
         </a>
       );
     });

src/client/styles/scss/_tag.scss

@@ -18,6 +18,27 @@
   font-size: 10px;
 }
 
+.list-tag-icon {
+  font-size: 20px;
+  margin: auto 0px;
+}
+
+.list-tag-name {
+  font-size: 20px;
+  margin-left: 5px;
+}
+
+.list-tag-count {
+  color: rgba(60, 74, 96, 0.5);
+  background: rgba(0, 0, 0, 0.08);
+  padding: 2px 20px;
+  border-radius: 40px;
+  font-size: 100%;
+  height: 20px;
+  margin: auto 20px;
+}
+
+
 #editTagModal {
   .form-control {
     height: auto;