fixed tag button on node related

src/components/common/Pressable/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { ButtonProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface PressableProps extends ButtonProps {}
+
+const Pressable: FC<PressableProps> = ({ children, ...rest }) => (
+  <button {...rest} className={classNames(styles.pressable, rest.className)}>
+    {children}
+  </button>
+);
+
+export { Pressable };

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

@@ -0,0 +1,10 @@
+.pressable {
+  color: inherit;
+  border: none;
+  font: inherit;
+  padding: 0;
+  margin: 0;
+  text-transform: inherit;
+  cursor: pointer;
+  display: inline-flex;
+}

src/components/node/NodeRelatedBlock/index.tsx

@@ -1,9 +1,13 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { Anchor } from '~/components/common/Anchor';
+import { Pressable } from '~/components/common/Pressable';
+import { SubTitle } from '~/components/common/SubTitle';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
+import { Dialog } from '~/constants/modal';
 import { URLS } from '~/constants/urls';
+import { useShowModal } from '~/hooks/modal/useShowModal';
 import { INode } from '~/types';
 import { INodeRelated } from '~/types/node';
 
@@ -14,6 +18,8 @@ interface IProps {
 }
 
 const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
+  const goToTag = useShowModal(Dialog.TagSidebar);
+
   if (isLoading) {
     return <NodeRelatedPlaceholder />;
   }
@@ -27,11 +33,7 @@ const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
           .filter(album => related.albums[album].length > 0)
           .map(album => (
             <NodeRelated
-              title={
-                <Anchor href={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
-                  {album}
-                </Anchor>
-              }
+              title={<Pressable onClick={() => goToTag({ tag: album })}>{album}</Pressable>}
               items={related.albums[album]}
               key={album}
             />