Add videos section
This commit is contained in:
Kamran Ahmed
146
pages/index.tsx
146
pages/index.tsx
@ -8,9 +8,9 @@ import {
|
|||||||
Image,
|
Image,
|
||||||
Link,
|
Link,
|
||||||
SimpleGrid,
|
SimpleGrid,
|
||||||
Stack,
|
Stack, StackDivider,
|
||||||
Text,
|
Text,
|
||||||
Tooltip
|
Tooltip, VStack
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { InfoIcon } from '@chakra-ui/icons';
|
import { InfoIcon } from '@chakra-ui/icons';
|
||||||
import { TextIcon } from './icons/text-icon';
|
import { TextIcon } from './icons/text-icon';
|
||||||
@ -321,6 +321,148 @@ export default function Home() {
|
|||||||
<Box pt='40px' mb='20px'>
|
<Box pt='40px' mb='20px'>
|
||||||
<Heading color='green.500' fontSize='25px' mb='5px'>Video Explanations</Heading>
|
<Heading color='green.500' fontSize='25px' mb='5px'>Video Explanations</Heading>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
<VStack
|
||||||
|
// bg={'white'}
|
||||||
|
// borderWidth={1}
|
||||||
|
rounded='5px'
|
||||||
|
divider={<StackDivider borderColor='gray.200' />}
|
||||||
|
spacing={0}
|
||||||
|
align='stretch'
|
||||||
|
>
|
||||||
|
<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'>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>
|
||||||
|
</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>
|
||||||
|
</VStack>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Reference in New Issue
Block a user