add backlinks

src/components/boris/BorisContactItem/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, useCallback } from 'react';
 
-import { Group } from '~/components/containers/Group';
+import { WithDescription } from '~/components/common/WithDescription';
 import { Icon } from '~/components/input/Icon';
 
 import styles from './styles.module.scss';
@@ -31,20 +31,12 @@ const BorisContactItem: FC<Props> = ({
   return (
     <div>
       {prefix}
-      <div
-        onClick={onClick}
-        className={styles.item}
-        role={link ? 'button' : 'none'}
-      >
-        <div className={styles.icon}>
-          <Icon icon={icon} size={32} />
-        </div>
-
-        <div className={styles.info}>
-          <div className={styles.title}>{title}</div>
-          <div className={styles.subtitle}>{subtitle}</div>
-        </div>
-      </div>
+      <WithDescription
+        icon={<Icon icon={icon} size={32} />}
+        title={title}
+        link={link}
+        subtitle={subtitle}
+      />
       {suffix}
     </div>
   );

src/components/common/WithDescription/index.tsx

@@ -0,0 +1,39 @@
+import { FC, ReactNode, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  link?: string;
+}
+
+const WithDescription: FC<Props> = ({ icon, title, subtitle, link }) => {
+  const onClick = useCallback(() => {
+    if (!link) return;
+
+    window.open(link);
+  }, []);
+
+  return (
+    <div
+      onClick={onClick}
+      className={classNames(styles.item, { [styles.link]: link })}
+      role={link ? 'button' : 'none'}
+    >
+      <div className={styles.icon}>{icon}</div>
+
+      <div className={styles.info}>
+        <div className={styles.title}>{title}</div>
+        {!!subtitle?.trim() && (
+          <div className={styles.subtitle}>{subtitle}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { WithDescription };

src/components/common/WithDescription/styles.module.scss

@@ -9,11 +9,14 @@
   color: $gray_50;
   padding: $gap;
   min-height: 42px;
+
+  &.link {
+    cursor: pointer;
+  }
 }
 
 .icon {
   fill: currentColor;
-  height: 32px;
 }
 
 .info {

src/components/containers/Card/index.tsx

@@ -8,10 +8,25 @@ import styles from './styles.module.scss';
 
 export type CardProps = DivProps & {
   seamless?: boolean;
+  elevation?: -1 | 0 | 1;
 };
 
-const Card: FC<CardProps> = ({ className, children, seamless, ...props }) => (
-  <div className={classNames(styles.card, className, { seamless })} {...props}>
+const Card: FC<CardProps> = ({
+  className,
+  children,
+  seamless,
+  elevation = 1,
+  ...props
+}) => (
+  <div
+    className={classNames(
+      styles.card,
+      { seamless },
+      styles[`elevation-${elevation}`],
+      className,
+    )}
+    {...props}
+  >
     {children}
   </div>
 );

src/components/containers/Card/styles.module.scss

@@ -5,7 +5,18 @@
   border-radius: $panel_radius;
   padding: $gap;
 
-  @include outer_shadow();
+  &.elevation--1 {
+    @include inner_shadow;
+    background: linear-gradient(135deg, $content_bg_dark, $content_bg);
+  }
+
+  &.elevation-1 {
+    @include outer_shadow();
+  }
+
+  &.elevation-0 {
+    background: $content_bg_light;
+  }
 
   &:global(.seamless) {
     padding: 0;

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;