From 9435df5b10e3d6833cc2881100654dc5efa392a9 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Sat, 27 Jul 2019 18:28:28 +0700
Subject: [PATCH] Tags component

---
 src/components/main/SidePane/styles.scss      |  1 -
 src/components/node/Tag/styles.scss           |  1 -
 src/components/node/Tags/index.tsx            | 25 +++++++++++++++++++
 .../examples/ImageExample/index.tsx           | 19 ++++++++------
 src/redux/types.ts                            |  2 +-
 webpack.config.js                             |  2 +-
 6 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 src/components/node/Tags/index.tsx

diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss
index 13a3826d..124bfa62 100644
--- a/src/components/main/SidePane/styles.scss
+++ b/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;
diff --git a/src/components/node/Tag/styles.scss b/src/components/node/Tag/styles.scss
index 0c8b65f3..10c96128 100644
--- a/src/components/node/Tag/styles.scss
+++ b/src/components/node/Tag/styles.scss
@@ -26,7 +26,6 @@
 
   &:global(.green) {
     background: $green_gradient;
-    color: transparentize(black, 0.4);
   }
 
   &:global(.olive) {
diff --git a/src/components/node/Tags/index.tsx b/src/components/node/Tags/index.tsx
new file mode 100644
index 00000000..b2568615
--- /dev/null
+++ b/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>
+);
diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx
index 24666009..d7884953 100644
--- a/src/containers/examples/ImageExample/index.tsx
+++ b/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"
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 7c91b303..50ec4bf4 100644
--- a/src/redux/types.ts
+++ b/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';
 }
diff --git a/webpack.config.js b/webpack.config.js
index a5d8c241..23eab006 100644
--- a/webpack.config.js
+++ b/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',
 });