Created filtering by tag feature

src/utils/Tag.js

@@ -2,21 +2,27 @@ import React from 'react';
 import ColorGenerator from '../utils/ColorGenerator';
 import './Tag.scss';
 
-export default class Tag extends React.Component {
-  constructor(props) {
-    super(props);
-    this.colorGenerator = props.ColorGenerator;
-  }
-
-  render() {
-    return (
-      <span className="badge tag" style={{ backgroundColor: this.colorGenerator.getColorForKey(this.props.text) }}>
-        {this.props.text}
-      </span>
-    );
+export default function Tag (
+  {
+    colorGenerator,
+    text,
+    clearable,
+    onClick = () => ({}),
+    onClose = () => ({})
   }
+) {
+  return (
+    <span
+      className="badge tag"
+      style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
+      onClick={onClick}
+    >
+      {text}
+      {clearable && <span className="close tag__close-selected-tag" onClick={onClose}>&times;</span>}
+    </span>
+  );
 }
 
 Tag.defaultProps = {
-  ColorGenerator
+  colorGenerator: ColorGenerator
 };

src/utils/Tag.scss

@@ -1,7 +1,21 @@
 .tag {
   color: #fff;
+  cursor: pointer;
 }
 
 .tag:not(:last-child) {
   margin-right: 3px;
 }
+
+.tag__close-selected-tag.tag__close-selected-tag {
+  font-size: inherit;
+  color: inherit;
+  opacity: 1;
+  cursor: pointer;
+  margin-left: 5px;
+}
+
+.tag__close-selected-tag.tag__close-selected-tag:hover {
+  color: inherit;
+  opacity: 1;
+}