node related images

src/components/node/NodePanel/styles.scss

@@ -1,16 +1,14 @@
 .wrap {
-  //height: $node_title_height;
+  background: #090909;
-  //background: $node_title_background;
-  background: transparentize(black, 0.9);
   padding: $gap;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: stretch;
-  //border-radius: $radius $radius 0 0;
+  border-radius: $cell_radius $cell_radius 0 0;
-  //box-shadow: transparentize(black, 0.3) 0 2px, inset transparentize(white, 0.98) 0 1px;
   box-shadow: transparentize(white, 0.97) 0 1px, inset transparentize(white, 0.97) 0 1px;
   position: relative;
+  margin-top: -$radius;
 }
 
 .title {

src/components/node/NodeRelated/index.tsx

@@ -0,0 +1,25 @@
+import React, {FC, HTMLAttributes} from 'react';
+import { range } from 'ramda';
+import * as styles from './styles.scss';
+import {Group} from "~/components/containers/Group";
+
+type IProps = HTMLAttributes<HTMLDivElement> & {}
+
+const NodeRelated: FC<IProps> = ({
+  title,
+}) => (
+  <Group className={styles.wrap}>
+    <div className={styles.title}>
+      <div className={styles.line} />
+      <div className={styles.text}>{title}</div>
+      <div className={styles.line} />
+    </div>
+    <div className={styles.grid}>
+      {
+        range(1,7).map(el => (<div className={styles.item} />))
+      }
+    </div>
+  </Group>
+);
+
+export { NodeRelated };

src/components/node/NodeRelated/styles.scss

@@ -0,0 +1,38 @@
+.wrap {
+  padding: $gap;
+  background: transparentize(black, 0.8);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
+  grid-template-rows: auto;
+  grid-auto-rows: auto;
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+}
+
+.item {
+  background: #222222;
+  padding-bottom: 100%;
+  border-radius: $cell_radius;
+}
+
+.title {
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  color: transparentize(white, 0.7);
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+}
+
+.line {
+  flex: 1;
+  height: 2px;
+  background: transparentize(white, 0.95);
+}
+
+.text {
+  margin: 0 $gap;
+}

src/components/node/Tag/index.tsx

@@ -1,17 +1,22 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import classNames = require("classnames");
+import {ITag} from "~/redux/types";
 
 interface IProps {
-  title: string;
+  title: ITag['title'];
-  color?: 'red' | 'blue' | 'green' | 'olive' | 'black';
+  feature?: ITag['feature'];
+
+  is_hoverable?: boolean;
 }
 
 const Tag: FC<IProps> = ({
   title,
-  color,
+  feature,
+
+  is_hoverable,
 }) => (
-  <div className={classNames(styles.tag, color)}>
+  <div className={classNames(styles.tag, feature, { is_hoverable })}>
     <div className={styles.hole} />
     <div className={styles.title}>{title}</div>
   </div>

src/components/node/Tag/styles.scss

@@ -12,6 +12,10 @@
   box-shadow: $shadow_depth_2;
   margin: ($gap / 2) $gap ($gap / 2) 0;
 
+  &:global(.is_hoverable) {
+    cursor: pointer;
+  }
+
   &:global(.red) {
     background: $red;
   }
@@ -35,6 +39,7 @@
     background: transparentize(black, 0.7);
     box-shadow: none;
     color: transparentize(white, 0.6);
+    font: $font_12_medium;
 
     .hole::after { background: transparentize(white, 0.98); }
   }

src/containers/examples/ImageExample/index.tsx

@@ -9,6 +9,7 @@ import { NodePanel } from "~/components/node/NodePanel";
 import { Filler } from "~/components/containers/Filler";
 import { Tag } from "~/components/node/Tag";
 import { TagField } from "~/components/containers/TagField";
+import {NodeRelated} from "~/components/node/NodeRelated";
 
 interface IProps {}
 
@@ -82,13 +83,24 @@ const ImageExample: FC<IProps> = () => (
                 </Padder>
 
                 <TagField>
+                  <Tag title="Избранный" feature="red" />
+                  <Tag title="Some another tag" feature="blue" />
+                  <Tag title="Плэйлист" feature="green" />
+                  <Tag title="/Revelations" feature="olive" />
                   <Tag title="Tag" />
-                  <Tag title="Some tag" color="red" />
+                  <Tag title="Фотография" feature="black" />
-                  <Tag title="Some another tag" color="blue" />
+                  <Tag title="С музыкой" feature="black" />
-                  <Tag title="Some tag" color="green" />
-                  <Tag title="Some tag" color="olive" />
-                  <Tag title="Some tag" color="black" />
                 </TagField>
+
+                <NodeRelated
+                  title="First album"
+                />
+
+                <div />
+
+                <NodeRelated
+                  title="Second album"
+                />
               </Group>
             </div>
           </Group>

src/redux/types.ts

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

src/styles/variables.scss

@@ -55,7 +55,7 @@ $shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0
 $comment_shadow: $shadow_depth_2;
 $node_shadow:  transparentize(black, 0.8) 1px 2px;
 
-$tag_height: 24px;
+$tag_height: 22px;
 
 @mixin outer_shadow() {
   box-shadow: inset transparentize(white, 0.95) 0 1px,