github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add video and guide components

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent c84e7d41bb
commit b4ce36fb04
6 changed files with 163 additions and 459 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      components/dimmed-more.tsx
  2. 38
      pages/guides/components/guide-list-item.tsx
  3. 5
      pages/guides/index.tsx
  4. 491
      pages/index.tsx
  5. 38
      pages/watch/components/video-list-item.tsx
  6. 5
      pages/watch/index.tsx

45
components/dimmed-more.tsx
Unescape View File

@ -0,0 +1,45 @@
import { Box, Link, Text } from '@chakra-ui/react';
type DimmedMoreProps = {
text: string;
};
export function DimmedMore(props: DimmedMoreProps) {
const { text } = props;
return (
<Box position='relative' textAlign='center' bottom='20px'>
<Box
opacity={1}
pointerEvents='none'
position='absolute'
bottom={0}
height='200px'
width='100%'
background='linear-gradient(180deg, transparent, #e6fffa)'
/>
<Link
rounded='20px'
display='inline'
bg='green.600'
color='white'
p='7px 20px'
href={'#'}
fontWeight={800}
fontSize='11px'
textTransform='uppercase'
my='25px'
position='relative'
_hover={{
textDecoration: 'none',
'& .forward-arrow': {
transform: 'translateX(3px)'
}
}}>
{text}
<Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
</Link>
</Box>
);
}

38
pages/guides/components/guide-list-item.tsx
Unescape View File

@ -0,0 +1,38 @@
import { Badge, Flex, Link, Text } from '@chakra-ui/react';
type GuideListItemProps = {
title: string;
date: string;
isPro?: boolean;
};
export function GuideListItem(props: GuideListItemProps) {
const { title, date, isPro = false } = props;
return (
<Link
fontSize='15px'
px='0'
py='8px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='guide-title' transition={'200ms'}>
<Text as='span' ml='7px'>{title}</Text>
{isPro && <Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>}
</Flex>
<Text fontSize='13px' color='gray.500' as='span'>{date}</Text>
</Link>
);
}

5
pages/guides/index.tsx
Unescape View File

@ -0,0 +1,5 @@
export default function Guides() {
return (
<h1>Hello world</h1>
);
}

491
pages/index.tsx
Unescape View File

@ -19,6 +19,9 @@ import { Header } from '../components/header';
import { Footer } from '../components/footer'; import { Footer } from '../components/footer';
import { UpdatesBanner } from '../components/updates-banner'; import { UpdatesBanner } from '../components/updates-banner';
import { OpensourceBanner } from '../components/opensource-banner'; import { OpensourceBanner } from '../components/opensource-banner';
import { GuideListItem } from './guides/components/guide-list-item';
import { DimmedMore } from '../components/dimmed-more';
import { VideoListItem } from './watch/components/video-list-item';
export default function Home() { export default function Home() {
return ( return (
@ -89,208 +92,24 @@ export default function Home() {
<Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading> <Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
</Box> </Box>
<Stack> <VStack
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px' rounded='5px'
pos='relative' divider={<StackDivider borderColor='gray.200' />}
_hover={{ spacing={0}
textDecoration: 'none', align='stretch'
color: 'blue.400', >
'& .guide-title': { <GuideListItem title='Session based Authentication' date='June 12, 2021' />
transform: 'translateX(10px)' <GuideListItem title='JSON Web Tokens' date='June 05, 2021' />
} <GuideListItem title='Token Based Authentication' date='May 15, 2021' />
}} borderBottomWidth={1} <GuideListItem isPro title='Character Encodings' date='March 06, 2021' />
py='5px' color='gray.600'> <GuideListItem title='SSL vs TLS vs HTTPs vs SSH' date='February 15, 2021' />
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500} <GuideListItem title='Continuous Integration and Deployment' date='February 15, 2021' />
as='span'> <GuideListItem title='Authentication' date='February 01, 2021' />
Session based Authentication <GuideListItem title='DHCP in One Picture' date='February 01, 2021' />
</Text> <GuideListItem title='Session Based Authentication' date='February 01, 2021' />
<Text fontSize='13px' color='gray.500' as='span'>June 12, 2021</Text>
</Link> <DimmedMore text='View all Guides' />
</VStack>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
JSON Web Tokens
</Text>
<Text fontSize='13px' color='gray.500' as='span'>June 05, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Token Based Authentication
<Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
</Text>
<Text fontSize='13px' color='gray.500' as='span'>May 15, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Encodings</Text>
<Text fontSize='13px' color='gray.500' as='span'>March 06, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
SSL vs TLS vs HTTPs vs SSH
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Integration and
Deployment</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Authentication</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Character Encodings
<Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
</Link>
<Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}} borderBottomWidth={1}
py='5px' color='gray.600'>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
DHCP in One Picture
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
</Link>
<Link
d='flex'
justifyContent='space-between'
href='#'
fontSize='15px'
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .guide-title': {
transform: 'translateX(10px)'
}
}}
py='5px'
color='gray.600'
>
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
as='span'>
Session Based Authentication
</Text>
<Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
</Link>
<Box position='relative' textAlign='center' bottom='20px'>
<Box
opacity={1}
pointerEvents='none'
position='absolute'
bottom={0}
height='200px'
width='100%'
background='linear-gradient(180deg, transparent, #e6fffa)'
/>
<Link
rounded='20px'
display='inline'
bg='green.600'
color='white'
p='7px 20px'
href={'#'}
fontWeight={800}
fontSize='11px'
textTransform='uppercase'
my='25px'
position='relative'
_hover={{
textDecoration: 'none',
'& .forward-arrow': {
transform: 'translateX(3px)'
}
}}>
View all guides
<Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
</Link>
</Box>
</Stack>
</Container> </Container>
</Box> </Box>
@ -301,268 +120,22 @@ export default function Home() {
</Box> </Box>
<VStack <VStack
// bg={'white'}
// borderWidth={1}
rounded='5px' rounded='5px'
divider={<StackDivider borderColor='gray.200' />} divider={<StackDivider borderColor='gray.200' />}
spacing={0} spacing={0}
align='stretch' align='stretch'
> >
<Link <VideoListItem title='Transport Protocols: TCP vs UDP' duration='15 minutes' />
fontSize='15px' <VideoListItem title='OSI Model Explained' duration='10 minutes' />
p='10px' <VideoListItem title='Creating a React App' isPro duration='15 minutes' />
d='flex' <VideoListItem title='DOM vs Shadow DOM vs Virtual DOM' isPro duration='15 minutes' />
fontWeight={500} <VideoListItem title='Everything you need to know about HTTP caching' isPro duration='10 minutes' />
color='gray.600' <VideoListItem title='Content Delivery Networks' duration='5 minutes' />
alignItems='center' <VideoListItem title='Load Balancers in Depth' duration='15 minutes' />
justifyContent={'space-between'} <VideoListItem title='DNS and how does it work?' duration='2 minutes' />
_hover={{ <VideoListItem title='JavaScript Fetch API' duration='22 minutes' />
textDecoration: 'none',
color: 'blue.400', <DimmedMore text={'View all Videos'} />
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Scaling the Unscalable — System Design 101</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Tranpsort Protocols: TCP vs UDP</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>OSI Model Explained</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Creating a React App</Text>
<Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>DOM vs Shadow DOM vs Virtual DOM</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Everything you need to know about HTTP caching</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Content Delivery Networks</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Load Balancers in Depth</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>DNS and How does it Work?</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>JavaScript Fetch API</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Box position='relative' textAlign='center' bottom='10px'>
<Box
opacity={1}
pointerEvents='none'
position='absolute'
bottom={0}
height='200px'
width='100%'
background='linear-gradient(180deg, transparent, #e6fffa)'
/>
<Link
rounded='20px'
display='inline'
bg='green.600'
color='white'
p='7px 20px'
href={'#'}
fontWeight={800}
fontSize='11px'
textTransform='uppercase'
my='25px'
position='relative'
_hover={{
textDecoration: 'none',
'& .forward-arrow': {
transform: 'translateX(3px)'
}
}}>
View all Videos
<Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
</Link>
</Box>
</VStack> </VStack>
</Container> </Container>
</Box> </Box>

38
pages/watch/components/video-list-item.tsx
Unescape View File

@ -0,0 +1,38 @@
import { Badge, Flex, Link, Text } from '@chakra-ui/react';
import { VideoIcon } from '../../../icons/video-icon';
type VideoListItemProps = {
title: string;
duration: string;
isPro?: boolean;
};
export function VideoListItem(props: VideoListItemProps) {
const { title, duration, isPro = false } = props;
return (
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>{title}</Text>
{isPro && <Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>}
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>{duration}</Text>
</Link>
);
}

5
pages/watch/index.tsx
Unescape View File

@ -0,0 +1,5 @@
export default function Watch() {
return (
<h1>Hello world</h1>
);
}
Write Preview
Loading…
Cancel
Save