add backlinks

src/components/node/Backlink/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import { WithDescription } from '~/components/common/WithDescription';
+import { Icon } from '~/components/input/Icon';
+
+interface BacklinkProps {
+  icon?: string;
+  title: string;
+  subtitle?: string;
+  link: string;
+}
+
+const Backlink: FC<BacklinkProps> = ({ icon, title, subtitle, link }) => (
+  <WithDescription
+    title={title}
+    subtitle={subtitle}
+    icon={icon && <Icon icon={icon} />}
+    link={link}
+  />
+);
+
+export { Backlink };

src/components/node/NodeAuthorBlock/index.tsx

@@ -1,6 +1,7 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
+import { Card } from '~/components/containers/Card';
 import { useUserDescription } from '~/hooks/auth/useUserDescription';
 import { INodeUser } from '~/types';
 
@@ -20,14 +21,14 @@ const NodeAuthorBlock: FC<Props> = ({ user }) => {
   const { fullname, username, photo } = user;
 
   return (
-    <div className={styles.block}>
+    <Card className={styles.block} elevation={-1}>
       <Avatar username={username} url={photo?.url} className={styles.avatar} />
 
       <div className={styles.info}>
         <div className={styles.username}>{fullname || username}</div>
         <div className={styles.description}>{description}</div>
       </div>
-    </div>
+    </Card>
   );
 };
 

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

@@ -1,10 +1,6 @@
 @import 'src/styles/variables.scss';
 
 div.block {
-  @include inner_shadow_active;
-
-  cursor: pointer;
-  background: linear-gradient(135deg, $content_bg_dark, $content_bg);
   padding: $gap;
   border-radius: $radius;
   display: flex;
@@ -13,9 +9,6 @@ div.block {
   justify-content: stretch;
 }
 
-.info {
-}
-
 .username {
   font: $font_16_semibold;
   line-height: 21px;