node related images

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;
+}