NodeLayout

src/components/node/NodeComments/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import range from 'ramda/es/range';
+import { Comment } from '../Comment';
+import { INode } from '~/redux/types';
+
+interface IProps {
+  comments?: any;
+}
+
+const NodeComments: FC<IProps> = ({ comments }) => (
+  <div>
+    {range(1, 6).map(el => (
+      <Comment key={el} />
+    ))}
+  </div>
+);
+
+export { NodeComments };

src/components/node/NodeImageBlock/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { ImageSwitcher } from '../ImageSwitcher';
+import * as styles from './styles.scss';
+
+interface IProps {}
+
+const NodeImageBlock: FC<IProps> = ({}) => (
+  <div>
+    <ImageSwitcher total={5} current={2} />
+
+    <div className={styles.image_container}>
+      <img
+        className={styles.image}
+        src="http://37.192.131.144/full/attached/2019/08/e4fb2a1d0a2e20d499aaa1f5f83a7115.jpg"
+        alt=""
+      />
+    </div>
+  </div>
+);
+
+export { NodeImageBlock };

src/components/node/NodeImageBlock/styles.scss

@@ -0,0 +1,15 @@
+.image_container {
+  width: 100%;
+  background: $node_image_bg;
+  border-radius: $panel_radius 0 0 $panel_radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image {
+    max-height: 800px;
+    opacity: 1;
+    width: 100%;
+    border-radius: $radius $radius 0 0;
+  }
+}

src/components/node/NodeImageBlockPlaceholder/index.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+
+const NodeImageBlockPlaceholder: FC<{}> = () => (
+  <div className={styles.placeholder}>
+    <LoaderCircle size={64} />
+  </div>
+);
+
+export { NodeImageBlockPlaceholder };

src/components/node/NodeImageBlockPlaceholder/styles.scss

@@ -0,0 +1,14 @@
+.placeholder {
+  height: 33vw;
+  background: transparentize(black, 0.8);
+  border: $radius $radius 0 0;
+  @include outer_shadow();
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: transparentize(white, 0.95);
+  }
+}

src/components/node/NodeTags/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { Tags } from '../Tags';
+
+interface IProps {}
+
+const NodeTags: FC<IProps> = ({}) => (
+  <Tags
+    tags={[
+      { title: 'Избранный', feature: 'red' },
+      { title: 'Плейлист', feature: 'green' },
+      { title: 'Просто' },
+      { title: '+ фото', feature: 'black' },
+      { title: '+ с музыкой', feature: 'black' },
+    ]}
+  />
+);
+
+export { NodeTags };