Tags component

src/components/main/SidePane/styles.scss

@@ -45,7 +45,6 @@
     }
   }
 }
-
 .btn {
   height: 54px;
   box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px;

src/components/node/Tag/styles.scss

@@ -26,7 +26,6 @@
 
   &:global(.green) {
     background: $green_gradient;
-    color: transparentize(black, 0.4);
   }
 
   &:global(.olive) {

src/components/node/Tags/index.tsx

@@ -0,0 +1,25 @@
+import React, {FC, HTMLAttributes} from 'react';
+import {TagField} from "~/components/containers/TagField";
+import {ITag} from "~/redux/types";
+import {Tag} from "~/components/node/Tag";
+
+type IProps = HTMLAttributes<HTMLDivElement> & {
+  tags: ITag[];
+}
+
+export const Tags: FC<IProps> = ({
+  tags,
+  ...props
+}) => (
+  <TagField {...props}>
+    {
+      tags.map(tag => (
+        <Tag
+          key={tag.title}
+          title={tag.title}
+          feature={tag.feature}
+        />
+      ))
+    }
+  </TagField>
+);

src/containers/examples/ImageExample/index.tsx

@@ -10,6 +10,7 @@ import { Filler } from "~/components/containers/Filler";
 import { Tag } from "~/components/node/Tag";
 import { TagField } from "~/components/containers/TagField";
 import {NodeRelated} from "~/components/node/NodeRelated";
+import {Tags} from "~/components/node/Tags";
 
 interface IProps {}
 
@@ -82,13 +83,17 @@ const ImageExample: FC<IProps> = () => (
                   </Group>
                 </Padder>
 
-                <TagField>
-                  <Tag title="Избранный" feature="red" />
-                  <Tag title="Плэйлист" feature="green" />
-                  <Tag title="Tag" />
-                  <Tag title="Фотография" feature="black" />
-                  <Tag title="С музыкой" feature="black" />
-                </TagField>
+                {
+                  <Tags
+                    tags={[
+                      { title: 'Избранный', feature: 'red' },
+                      { title: 'Плейлист', feature: 'green' },
+                      { title: 'Просто' },
+                      { title: '+ фото', feature: 'black' },
+                      { title: '+ с музыкой', feature: 'black' },
+                    ]}
+                  />
+                }
 
                 <NodeRelated
                   title="First album"

src/redux/types.ts

@@ -1,4 +1,4 @@
 export type ITag = {
   title: string;
-  feature: 'red' | 'blue' | 'green' | 'olive' | 'black';
+  feature?: 'red' | 'blue' | 'green' | 'olive' | 'black';
 }

webpack.config.js

@@ -9,7 +9,7 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const htmlPlugin = new HtmlWebPackPlugin({
   template: './src/index.html',
   filename: './index.html',
-  title: 'Empty React Project',
+  title: 'VLT',
   hash: false,
   // favicon: 'src/sprites/favicon.png',
 });