display common paths in tooltip

daostack · Dec 19, 2023 · 4c71d54 · 4c71d54
1 parent ce1972e
commit 4c71d54
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss
@@ -12,6 +12,8 @@
 .tooltipContent {
   max-width: 20rem;
   z-index: 3;
+  display: flex;
+  flex-direction: column;
 }
 
 .contentTitle {
@@ -20,3 +22,21 @@
   font-size: 0.75rem;
   color: $c-gray-40;
 }
+
+.loader {
+  margin: 0 auto;
+}
+
+.link {
+  margin-bottom: 0.625rem;
+  font-size: 0.875rem;
+  text-decoration: none;
+
+  &:hover {
+    color: $c-pink-primary;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx
@@ -1,7 +1,14 @@
 import React, { FC, MouseEventHandler, useEffect, useState } from "react";
+import { NavLink } from "react-router-dom";
 import { ButtonIcon } from "@/shared/components";
+import { useRoutesContext } from "@/shared/contexts";
 import { Link4Icon } from "@/shared/icons";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui-kit";
+import {
+  Loader,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/ui-kit";
 import { useCommonPaths } from "./hooks";
 import styles from "./LinkedItemMark.module.scss";
 
@@ -24,6 +31,7 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
     fetched,
     fetchCommonPaths,
   } = useCommonPaths();
+  const { getCommonPagePath } = useRoutesContext();
 
   const toggleTooltip: MouseEventHandler = (event) => {
     event.stopPropagation();
@@ -51,6 +59,24 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
       </TooltipTrigger>
       <TooltipContent className={styles.tooltipContent}>
         <span className={styles.contentTitle}>Also appears in:</span>
+        {loading && <Loader className={styles.loader} />}
+        {!loading &&
+          commonPaths.map((commons, index) => {
+            const lastCommon = commons[commons.length - 1];
+            const key = lastCommon?.id || String(index);
+
+            return (
+              <NavLink
+                key={key}
+                className={styles.link}
+                to={getCommonPagePath(lastCommon?.id || "")}
+              >
+                {commons.map((common) => (
+                  <span key={common.id}>{common.name}</span>
+                ))}
+              </NavLink>
+            );
+          })}
       </TooltipContent>
     </Tooltip>
   );