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