diff --git a/public/svg-icons/LinkIcon.svg b/public/svg-icons/LinkIcon.svg
new file mode 100644
index 000000000..c6b07f8a9
--- /dev/null
+++ b/public/svg-icons/LinkIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
index 5d7a9d19d..29afffdeb 100644
--- a/src/components/App/SideBar/Relevance/Episode/index.tsx
+++ b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -1,6 +1,7 @@
import moment from 'moment'
import styled from 'styled-components'
import { BoostAmt } from '~/components/App/Helper/BoostAmt'
+import LinkIcon from '~/components/Icons/LinkIcon'
import { Avatar } from '~/components/common/Avatar'
import { Flex } from '~/components/common/Flex'
import { FlexboxProps } from '~/components/common/Flex/flexbox'
@@ -48,6 +49,7 @@ type Props = {
imageUrl: string
showTitle?: string
text?: string
+ link?: string
type?: string
name?: string
verified?: boolean
@@ -69,6 +71,7 @@ export const Episode = ({
text,
name,
profilePicture,
+ link,
verified = false,
twitterHandle,
className = 'episode-wrapper',
@@ -83,7 +86,7 @@ export const Episode = ({
{!isSelectedView && (
-
+
)}
@@ -92,6 +95,11 @@ export const Episode = ({
{type && }
+ {type === 'youtube' ? (
+ e.stopPropagation()}>
+
+
+ ) : null}
{episodeTitle}
@@ -174,3 +182,9 @@ export const Title = styled(Date)`
background: ${colors.GRAY6};
}
`
+
+const StyledLink = styled.a`
+ color: ${colors.GRAY6};
+ font-size: 16px;
+ height: 16px;
+`
diff --git a/src/components/App/SideBar/Relevance/index.tsx b/src/components/App/SideBar/Relevance/index.tsx
index 53d3b4442..cff89c2f5 100644
--- a/src/components/App/SideBar/Relevance/index.tsx
+++ b/src/components/App/SideBar/Relevance/index.tsx
@@ -66,6 +66,7 @@ export const Relevance = ({ isSearchResult }: Props) => {
show_title: showTitle,
node_type: nodeType,
text,
+ link,
name,
profile_picture: profilePicture,
verified = false,
@@ -81,13 +82,14 @@ export const Relevance = ({ isSearchResult }: Props) => {
episodeTitle={formatDescription(episodeTitle)}
id={id}
imageUrl={imageUrl || ''}
+ link={link}
name={name || ''}
onClick={() => handleNodeClick(n)}
profilePicture={profilePicture}
showTitle={formatDescription(showTitle)}
text={text || ''}
twitterHandle={twitterHandle}
- type={type || nodeType}
+ type={nodeType || type}
verified={verified}
/>
)
diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx
index 14df0cda8..67761e1e3 100644
--- a/src/components/App/SideBar/YouTube/index.tsx
+++ b/src/components/App/SideBar/YouTube/index.tsx
@@ -23,6 +23,7 @@ export const YouTube = () => {
image_url: imageUrl,
date,
boost,
+ node_type: nodeType,
type,
id,
show_title: showTitle,
@@ -61,9 +62,10 @@ export const YouTube = () => {
id={id}
imageUrl={imageUrl || 'video_default.svg'}
isSelectedView
+ link={link}
onClick={() => null}
showTitle={showTitle}
- type={type}
+ type={nodeType || type}
/>
diff --git a/src/components/Icons/LinkIcon.tsx b/src/components/Icons/LinkIcon.tsx
new file mode 100644
index 000000000..b07bfb7d2
--- /dev/null
+++ b/src/components/Icons/LinkIcon.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable */
+import React from 'react'
+
+const LinkIcon: React.FC
> = (props) => (
+
+)
+
+export default LinkIcon