comment form

src/components/containers/CommentWrapper/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import * as styles from './styles.scss';
+import { Card } from '../Card';
+
+type IProps = HTMLAttributes<HTMLDivElement> & {
+  photo?: string;
+  is_empty?: boolean;
+  is_loading?: boolean;
+};
+
+const CommentWrapper: FC<IProps> = ({
+  photo,
+  children,
+  is_empty,
+  is_loading,
+  className,
+  ...props
+}) => (
+  <Card
+    className={classNames(styles.wrap, className, { is_empty, is_loading })}
+    seamless
+    {...props}
+  >
+    <div className={styles.thumb}>
+      {photo && (
+        <div className={styles.thumb_image} style={{ backgroundImage: `url("${photo}")` }} />
+      )}
+    </div>
+
+    <div className={styles.text}>{children}</div>
+  </Card>
+);
+
+export { CommentWrapper };

src/components/containers/CommentWrapper/styles.scss

@@ -0,0 +1,26 @@
+.wrap {
+  background: $comment_bg;
+  min-height: 64px;
+  display: flex;
+  box-shadow: $comment_shadow;
+
+  &:global(.is_empty) {
+    opacity: 0.5;
+  }
+}
+
+.text {
+  flex: 1;
+}
+
+.thumb {
+  flex: 0 0 64px;
+  background: transparentize(black, 0.9);
+  border-radius: $panel_radius 0 0 $panel_radius;
+}
+
+.thumb_image {
+  height: 64px;
+  background: transparentize(white, 0.97);
+  border-radius: $panel_radius 0 0 $panel_radius;
+}