gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redirect youtube videos to youtuube

Browse Source
This commit is contained in:
Kamran Ahmed
2021-10-01 10:59:46 +02:00
parent f523b077a4
commit a2db93873b
4 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/links-list-item.tsx
View File

@ -6,15 +6,17 @@ type LinksListItemProps = {
title: string; title: string;
subtitle: string; subtitle: string;
badgeText?: string; badgeText?: string;
target?: string;
icon?: React.ReactChild; icon?: React.ReactChild;
hideSubtitleOnMobile?: boolean; hideSubtitleOnMobile?: boolean;
}; };
export function LinksListItem(props: LinksListItemProps) { export function LinksListItem(props: LinksListItemProps) {
const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props; const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
return ( return (
<Link <Link
target={target || '_self'}
href={href} href={href}
fontSize={['14px', '14px', '15px']} fontSize={['14px', '14px', '15px']}
py='9px' py='9px'

5
components/watch/video-grid-item.tsx
View File

@ -5,6 +5,7 @@ type VideoGridItemProps = {
title: string; title: string;
subtitle: string; subtitle: string;
date: string; date: string;
target?: string;
isNew?: boolean; isNew?: boolean;
isPro?: boolean; isPro?: boolean;
colorIndex?: number; colorIndex?: number;
@ -53,10 +54,10 @@ const bgColorList = [
]; ];
export function VideoGridItem(props: VideoGridItemProps) { export function VideoGridItem(props: VideoGridItemProps) {
const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props; const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href, target } = props;
return ( return (
<Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } shadow='xl' p='20px' <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}> rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<Text mb='7px' fontSize='12px' color='gray.400'> <Text mb='7px' fontSize='12px' color='gray.400'>
{isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>} {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}

3
pages/index.tsx
View File

@ -95,8 +95,9 @@ export default function Home(props: HomeProps) {
<LinksList> <LinksList>
{videos.map(video => ( {videos.map(video => (
<LinksListItem <LinksListItem
target={'_blank'}
key={video.id} key={video.id}
href={`/watch/${video.id}`} href={video.youtubeLink!}
badgeText={video.isPro ? 'PRO' : ''} badgeText={video.isPro ? 'PRO' : ''}
hideSubtitleOnMobile hideSubtitleOnMobile
title={video.title} title={video.title}

3
pages/watch/index.tsx
View File

@ -28,7 +28,8 @@ export default function Watch(props: VideosProps) {
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}> <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
{videos.map((video, counter) => ( {videos.map((video, counter) => (
<VideoGridItem <VideoGridItem
href={`/watch/${video.id}`} target='_blank'
href={video.youtubeLink!}
key={video.id} key={video.id}
title={video.title} title={video.title}
subtitle={video.description} subtitle={video.description}