add backlinks

src/containers/node/NodeBacklinks/index.tsx

@@ -0,0 +1,52 @@
+import { FC, useMemo } from 'react';
+
+import { SubTitle } from '~/components/common/SubTitle';
+import { Card } from '~/components/containers/Card';
+import { Padder } from '~/components/containers/Padder';
+import { Backlink } from '~/components/node/Backlink';
+import { NodeBackLink } from '~/types';
+import { has } from '~/utils/ramda';
+
+import { BACKLINK_TITLES, SOCIAL_ICONS } from '../../../constants/auth/socials';
+
+import styles from './styles.module.scss';
+
+interface NodeBacklinksProps {
+  list?: NodeBackLink[];
+}
+
+const NodeBacklinks: FC<NodeBacklinksProps> = ({ list }) => {
+  const validBacklinks = useMemo(
+    () => (list || []).filter((it) => it.provider && it.link),
+    [list],
+  );
+
+  if (!validBacklinks.length) {
+    return null;
+  }
+
+  return (
+    <div>
+      <SubTitle className={styles.subtitle}>Расшарено:</SubTitle>
+
+      <div className={styles.grid}>
+        {validBacklinks.map((it) => (
+          <Card elevation={-1} seamless key={it.link} className={styles.card}>
+            <Backlink
+              icon={SOCIAL_ICONS[it.provider]}
+              title={
+                has(it.provider, BACKLINK_TITLES)
+                  ? BACKLINK_TITLES[it.provider]
+                  : it.provider
+              }
+              subtitle={it.provider}
+              link={it.link}
+            />
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export { NodeBacklinks };

src/containers/node/NodeBacklinks/styles.module.scss

@@ -0,0 +1,14 @@
+@import '~/styles/variables.scss';
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.subtitle {
+  padding: $gap;
+}
+
+div.card {
+  padding-right: $gap !important;
+}

src/containers/node/NodeBottomBlock/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import { Card } from '~/components/containers/Card';
+import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { Sticky } from '~/components/containers/Sticky';
@@ -9,6 +11,7 @@ import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
+import { NodeBacklinks } from '~/containers/node/NodeBacklinks';
 import { NodeComments } from '~/containers/node/NodeComments';
 import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
@@ -25,7 +28,7 @@ interface IProps {
 
 const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
   const user = useUserContext();
-  const { node, isLoading } = useNodeContext();
+  const { node, isLoading, backlinks } = useNodeContext();
   const {
     comments,
     isLoading: isLoadingComments,
@@ -63,6 +66,12 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
                 user={user}
               />
             )}
+
+            <div className={styles.subheader}>
+              <Filler className={styles.backlinks}>
+                <NodeBacklinks list={backlinks} />
+              </Filler>
+            </div>
           </Group>
 
           <aside className={styles.panel}>

src/containers/node/NodeBottomBlock/styles.module.scss

@@ -46,3 +46,15 @@
 .left_item {
   padding-bottom: $gap * 2;
 }
+
+.subheader {
+  display: flex;
+  gap: $gap;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.backlinks {
+  min-height: 100%;
+  display: flex;
+}