diff --git a/src/components/App/SideBar/SelectedNodeView/Default/index.tsx b/src/components/App/SideBar/SelectedNodeView/Default/index.tsx index 3e2b3f2bd..7eaa79757 100644 --- a/src/components/App/SideBar/SelectedNodeView/Default/index.tsx +++ b/src/components/App/SideBar/SelectedNodeView/Default/index.tsx @@ -12,6 +12,7 @@ import { Text } from '~/components/common/Text' import { TypeBadge } from '~/components/common/TypeBadge' import AiPauseIcon from '~/components/Icons/AiPauseIcon' import AiPlayIcon from '~/components/Icons/AiPlayIcon' +import LinkIcon from '~/components/Icons/LinkIcon' import { useAppStore } from '~/stores/useAppStore' import { useSelectedNode } from '~/stores/useGraphStore' import { colors } from '~/utils/colors' @@ -71,6 +72,7 @@ export const Default = () => { const hasImage = !!selectedNode.properties?.image_url const hasAudio = !!selectedNode.properties?.audio_EN const customKeys = selectedNode.properties || {} + const sourceLink = selectedNode.properties?.source_link return ( @@ -88,8 +90,16 @@ export const Default = () => { ) : null} - + + {sourceLink && ( + + + + )} @@ -125,7 +135,7 @@ const NodeDetail = ({ label, value, hasAudio, isPlaying, togglePlay }: Props) => const isLong = (value as string).length > 140 const searchTerm = useAppStore((s) => s.currentSearch) - if (!value || label === 'Audio EN') { + if (!value || label === 'Audio EN' || label === 'Source Link') { return null } @@ -252,3 +262,14 @@ const AudioButton = styled(Button)` const StyledAudio = styled.audio` display: none; ` + +const StyledLinkIcon = styled.a` + margin-left: 6px; + color: ${colors.GRAY6}; + margin-top: 4px; + + svg { + width: 1.3em; + height: 1.3em; + } +`