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