diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss index d28744fe20..274eae13db 100644 --- a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss @@ -10,8 +10,10 @@ } .tooltipContent { - max-width: 20rem; + max-width: 30rem; z-index: 3; + display: flex; + flex-direction: column; } .contentTitle { @@ -20,3 +22,48 @@ font-size: 0.75rem; color: $c-gray-40; } + +.loader { + margin: 0 auto; +} + +.link { + width: 100%; + margin-bottom: 0.625rem; + display: flex; + align-items: center; + font-size: 0.875rem; + text-decoration: none; + + &:hover { + color: $c-pink-primary; + } + + &:last-child { + margin-bottom: 0; + } +} + +.linkLeft, +.linkRight { + white-space: nowrap; + overflow: hidden; +} + +.linkLeft { + display: flex; + align-items: center; + text-overflow: ellipsis; +} + +.linkRight { + flex-shrink: 0; +} + +.ellipsis { + flex-shrink: 0; +} + +.arrowIcon { + flex-shrink: 0; +} diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx index 42f8f5727f..0d6bcf42fb 100644 --- a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx @@ -1,7 +1,21 @@ -import React, { FC, MouseEventHandler, useEffect, useState } from "react"; +import React, { + FC, + MouseEventHandler, + ReactElement, + useEffect, + useState, +} from "react"; +import { NavLink } from "react-router-dom"; import { ButtonIcon } from "@/shared/components"; -import { Link4Icon } from "@/shared/icons"; -import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui-kit"; +import { useRoutesContext } from "@/shared/contexts"; +import { RightArrowThinIcon, Link4Icon } from "@/shared/icons"; +import { Common } from "@/shared/models"; +import { + Loader, + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/shared/ui-kit"; import { useCommonPaths } from "./hooks"; import styles from "./LinkedItemMark.module.scss"; @@ -24,6 +38,7 @@ const LinkedItemMark: FC = (props) => { fetched, fetchCommonPaths, } = useCommonPaths(); + const { getCommonPagePath } = useRoutesContext(); const toggleTooltip: MouseEventHandler = (event) => { event.stopPropagation(); @@ -42,6 +57,43 @@ const LinkedItemMark: FC = (props) => { fetchCommonPaths(commonIds); }, [isOpen]); + const renderFullPath = (commons: Common[]): ReactElement => { + return ( +
+ {commons.map((common, commonIndex) => ( + + {common.name} + {commonIndex !== commons.length - 1 && ( + + )} + + ))} +
+ ); + }; + + const renderCutPath = (commons: Common[]): ReactElement => { + const lastCommon = commons[commons.length - 1]; + const parentCommons = commons.slice(0, -1); + + return ( + <> +
+ {parentCommons.map((common, commonIndex) => ( + + {common.name} + {commonIndex !== commons.length - 1 && ( + + )} + + ))} +
+
+
{lastCommon?.name}
+ + ); + }; + return ( @@ -51,6 +103,23 @@ const LinkedItemMark: FC = (props) => { Also appears in: + {loading && } + {!loading && + commonPaths.map((commons, index) => { + const lastCommon = commons[commons.length - 1]; + const key = lastCommon?.id || String(index); + + return ( + + {renderCutPath(commons)} + + ); + })} );