fixed shadows, added author panel

src/components/node/NodeAuthorBlock/index.tsx

@@ -0,0 +1,32 @@
+import React, { FC, useCallback } from 'react';
+import { INode } from '~/redux/types';
+import styles from './styles.module.scss';
+import { CommentAvatar } from '~/components/comment/CommentAvatar';
+import { openUserProfile } from '~/utils/user';
+
+interface Props {
+  node?: INode;
+}
+
+const NodeAuthorBlock: FC<Props> = ({ node }) => {
+  if (!node?.user) {
+    return null;
+  }
+
+  const { fullname, username, description, photo } = node.user;
+
+  const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+
+  return (
+    <div className={styles.block} onClick={onOpenProfile}>
+      <CommentAvatar username={username} url={photo?.url} className={styles.avatar} />
+
+      <div className={styles.info}>
+        <div className={styles.username}>{fullname || username}</div>
+        {description && <div className={styles.description}>{description}</div>}
+      </div>
+    </div>
+  );
+};
+
+export { NodeAuthorBlock };

src/components/node/NodeAuthorBlock/styles.module.scss

@@ -0,0 +1,39 @@
+@import "~/styles/variables.scss";
+
+div.block {
+  @include inner_shadow_active;
+
+  cursor: pointer;
+  background: $inset_bg;
+  padding: $gap;
+  border-radius: $radius;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+}
+
+.info {
+}
+
+.username {
+  font: $font_16_semibold;
+  line-height: 21px;
+}
+
+.description {
+  @include clamp(3, 12 * 1.25);
+
+  margin-top: 3px;
+  font: $font_12_regular;
+  line-height: 1.25em;
+  opacity: 0.5;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  align-self: flex-start;
+}