NodeNoComments

src/components/containers/Card/index.tsx

@@ -7,8 +7,12 @@ type IProps = React.HTMLAttributes<HTMLDivElement> & {}
 const Card: FC<IProps> = ({
   className,
   children,
+  ...props
 }) => (
-    <div className={classNames(styles.card, className)}>
+    <div
+      className={classNames(styles.card, className)}
+      {...props}
+    >
       {children}
     </div>
 );

src/components/node/Comment/index.tsx

@@ -1,18 +1,28 @@
-import React, { FC } from 'react';
+import React, {FC, HTMLAttributes} from 'react';
 import { Card } from "~/components/containers/Card";
 import * as styles from './styles.scss';
+import classNames = require("classnames");
 
-interface IProps {}
+type IProps = HTMLAttributes<HTMLDivElement> & {
+  is_empty?: boolean;
+  is_loading?: boolean;
+}
 
-const Comment: FC<IProps> = () => (
-    <Card className={styles.wrap}>
+const Comment: FC<IProps> = ({
+  is_empty,
+  is_loading,
+  className,
+  ...props
+}) => (
+    <Card
+      className={classNames(styles.wrap, className, { is_empty, is_loading })}
+      {...props}
+    >
       <div className={styles.thumb}>
         <div className={styles.thumb_image} />
       </div>
 
-      <div className={styles.text}>
-        Lorem Ipsum
-      </div>
+      <div className={styles.text} />
     </Card>
 );
 

src/components/node/Comment/styles.scss

@@ -1,8 +1,12 @@
 .wrap {
   background: $comment_bg;
-  min-height: 200px;
+  min-height: 64px;
   display: flex;
   box-shadow: $comment_shadow;
+
+  &:global(.is_empty) {
+    opacity: 0.5;
+  }
 }
 
 .text {

src/components/node/NodeNoComments/index.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from "react";
+import { Comment } from "~/components/node/Comment";
+import * as styles from './styles.scss';
+import {Group} from "~/components/containers/Group";
+
+interface IProps {}
+
+const NodeNoComments: FC<IProps> = () => (
+  <Group className={styles.wrap}>
+    <Comment is_empty={true} is_loading={false} style={{ height: 94 }} />
+    <Comment is_empty={true} is_loading={false} style={{ height: 104 }} />
+    <Comment is_empty={true} is_loading={false} style={{ height: 100 }} />
+  </Group>
+);
+
+export { NodeNoComments };

src/components/node/NodeNoComments/styles.scss

@@ -0,0 +1,6 @@
+.wrap {
+  height: 300px;
+  overflow: hidden;
+
+  @include after_shade($node_bg);
+}

src/containers/examples/ImageExample/index.tsx

@@ -9,6 +9,7 @@ import { NodePanel } from "~/components/node/NodePanel";
 import { NodeRelated } from "~/components/node/NodeRelated";
 import { Tags } from "~/components/node/Tags";
 import { MenuButton } from "~/components/node/MenuButton";
+import { NodeNoComments } from "~/components/node/NodeNoComments";
 
 interface IProps {}
 
@@ -26,6 +27,8 @@ const ImageExample: FC<IProps> = () => (
         <Padder>
           <Group horizontal className={styles.content}>
             <Group className={styles.comments}>
+              <NodeNoComments />
+
               {
                 range(1,6).map(el => (
                   <Comment

src/styles/variables.scss

@@ -81,3 +81,20 @@ $tag_height: 22px;
   align-items: center;
   justify-content: center;
 }
+
+@mixin after_shade($color, $position: relative) {
+  position: $position;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 120px;
+    width: 100%;
+    background: linear-gradient(transparentize($color, 1), $color);
+    border-radius: $radius;
+    pointer-events: none;
+    touch-action: none;
+  }
+}